/* ===================================================================
   Logbuch-Design – gemeinsame Grundlage aller Seiten

   Schriften, Farben, Grundstil, Knoepfe, Stempel, Navigation, Footer,
   Logbuch-Eintraege mit eingeklebtem Foto, Formularfelder und das
   Einblenden beim Scrollen.

   Reihenfolge im <head>:
     1. basis.css
     2. logbuch.css (Startseite) oder seiten.css (alle Unterseiten)
     3. whatsapp.css

   Aufbau: mobile-first, Erweiterungen ab 600px, 860px und 1024px.
   Die Navigation schaltet bei 901px um (passend zu js/nav.js, das ab
   dieser Breite das Handy-Menue schliesst).
   =================================================================== */


/* ===== Schriften (lokal, OFL-Lizenzen in fonts/) ===== */

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

/* Nur fuer das Wort "Webentwicklers" im Titel der Startseite */
@font-face {
    font-family: "IM Fell English";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/im-fell-english-latin-400-italic.woff2") format("woff2");
}


/* ===== Grundlagen ===== */

:root {
    --papier: #ece5d6;
    --tinte: #1f2630;
    --rost: #a5432c;

    /* Abstufungen nur ueber Transparenz der drei Grundfarben */
    --tinte-leise: rgba(31, 38, 48, 0.74);
    --linie: rgba(31, 38, 48, 0.16);
    --linie-stark: rgba(31, 38, 48, 0.34);
    --blatt: rgba(255, 255, 255, 0.36);
    --papier-leise: rgba(236, 229, 214, 0.72);

    --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fell: "IM Fell English", Georgia, "Times New Roman", serif;

    --breite: 1120px;
    --nav-h: 64px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Sprungziele nicht unter der klebenden Navigation verstecken */
    scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
    margin: 0;
    background-color: var(--papier);
    color: var(--tinte);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

h1,
h2,
h3,
p,
figure {
    margin: 0;
}

h1,
h2,
h3 {
    line-height: 1.2;
}

.vp-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex: 0 0 auto;
}

:focus-visible {
    outline: 2px solid var(--rost);
    outline-offset: 3px;
}

.innen {
    max-width: var(--breite);
    margin: 0 auto;
}


/* ===== Knoepfe ===== */

.knopf,
.kontakt-form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 22px;

    border: 1.5px solid var(--tinte);
    border-radius: 3px;
    background-color: var(--tinte);
    color: var(--papier);

    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;

    transition: background-color 0.2s ease, border-color 0.2s ease,
        color 0.2s ease;
}

.knopf:hover,
.kontakt-form button[type="submit"]:hover {
    background-color: var(--rost);
    border-color: var(--rost);
}

.knopf-leise {
    background-color: transparent;
    color: var(--tinte);
}

.knopf-leise:hover {
    background-color: var(--tinte);
    border-color: var(--tinte);
    color: var(--papier);
}

.knopf svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}


/* ===== Stempel ===== */

.stempel {
    display: inline-block;
    padding: 8px 14px;

    border: 2px solid var(--rost);
    border-radius: 4px;
    /* zweiter, duenner Rand wie bei einem Gummistempel */
    outline: 1px solid var(--rost);
    outline-offset: 3px;

    color: var(--rost);
    font-family: var(--mono);
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;

    transform: rotate(-4deg);
}


/* ===== Navigation ===== */

.header-nav {
    position: sticky;
    top: 0;
    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--nav-h);
    padding: 0 16px;

    background-color: var(--papier);
    border-bottom: 1px solid var(--linie-stark);
}

.brand {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
}

.header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Handy: Menue klappt unter der Leiste auf */
.header-nav ul {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;

    display: none;
    flex-direction: column;
    padding: 4px 16px 16px;

    background-color: var(--papier);
    border-bottom: 1px solid var(--linie-stark);
}

.header-nav ul.active {
    display: flex;
}

.nav-link {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--linie);
    font-weight: 600;
    text-decoration: none;
}

.nav-cta {
    color: var(--rost);
}

.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 11px 9px;

    background: none;
    border: 0;
    cursor: pointer;
}

.hamburger span {
    display: block;
    height: 2px;
    background-color: var(--tinte);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Abdunkelung hinter dem offenen Handy-Menue */
body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    background-color: rgba(31, 38, 48, 0.28);
}

@media (min-width: 901px) {
    .header-nav {
        padding: 0 32px;
    }

    .hamburger {
        display: none;
    }

    .header-nav ul,
    .header-nav ul.active {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 28px;
        padding: 0;
        border: 0;
        background: none;
    }

    .nav-link {
        padding: 6px 0;
        border-bottom: 0;
    }

    .nav-link:not(.nav-cta):hover {
        color: var(--rost);
    }

    .nav-cta {
        padding: 7px 16px;
        border: 1.5px solid var(--rost);
        border-radius: 3px;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .nav-cta:hover {
        background-color: var(--rost);
        color: var(--papier);
    }

    body.nav-open::before {
        display: none;
    }
}


/* ===== Abschnitte allgemein ===== */

.abschnitt {
    padding: 64px 16px;
    border-bottom: 1px solid var(--linie-stark);
}

.abschnitt h2 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Kurzer rostroter Strich unter jeder Abschnitts-Ueberschrift */
.abschnitt h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 14px;
    background-color: var(--rost);
}

.abschnitt-text {
    max-width: 60ch;
    margin-top: 18px;
    color: var(--tinte-leise);
}

@media (min-width: 600px) {
    .abschnitt {
        padding: 88px 24px;
    }
}

@media (min-width: 1024px) {
    .abschnitt {
        padding: 104px 32px;
    }
}


/* ===== Logbuch-Eintraege (Startseite und Portfolio) ===== */

.eintrag {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px dashed var(--linie-stark);
}

.eintrag + .eintrag {
    margin-top: 56px;
}

.eintrag-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 18px;
    color: var(--tinte-leise);
    font-family: var(--mono);
    font-size: 0.875rem;
}

.eintrag-nr {
    color: var(--rost);
    font-size: 1.5rem;
    line-height: 1;
}

.eintrag-inhalt {
    display: grid;
    gap: 32px;
    margin-top: 24px;
}

/* Startseite: h3 unter "Logbuch"; Portfolio: h2 unter dem Seitentitel */
.eintrag-text h2,
.eintrag-text h3 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
}

.marke {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    border: 1px solid var(--rost);
    border-radius: 2px;
    color: var(--rost);
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    vertical-align: 0.3em;
}

.eintrag-unter {
    margin-top: 6px;
    margin-bottom: 14px;
    font-weight: 600;
}

/* Randnotiz: Stichworte in Schreibmaschinenschrift, links ein Strich */
.randnotiz {
    margin-top: 18px;
    padding-left: 14px;
    border-left: 2px solid var(--rost);
    color: var(--rost);
    font-family: var(--mono);
    font-size: 0.875rem;
    line-height: 1.6;
}

.eintrag-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 0;

    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--rost);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.eintrag-link:hover {
    color: var(--rost);
}

.eintrag-link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

@media (min-width: 860px) {
    .eintrag-inhalt {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: center;
        gap: 56px;
    }

    /* Jeder zweite Eintrag mit dem Foto rechts */
    .eintrag:nth-of-type(even) .foto {
        order: 2;
    }
}


/* ===== Eingeklebtes Foto mit Klebestreifen ===== */

.foto {
    position: relative;
    margin: 14px 6px 0;
    padding: 10px 10px 12px;

    background-color: rgba(255, 255, 255, 0.62);
    box-shadow:
        0 1px 2px rgba(31, 38, 48, 0.16),
        0 14px 28px -16px rgba(31, 38, 48, 0.45);

    transform: rotate(-1.2deg);
}

.eintrag:nth-of-type(even) .foto {
    transform: rotate(1deg);
}

.foto img {
    width: 100%;
    border: 1px solid var(--linie);
}

/* Zwei Streifen Klebeband mit ausgefransten Enden */
.foto::before,
.foto::after {
    content: "";
    position: absolute;
    top: -13px;
    z-index: 1;
    width: 92px;
    height: 26px;
    /* Papierton, leicht mit Tinte abgedunkelt: sichtbar auf dem weissen
       Rand und durchscheinend auf dem Foto */
    background-color: rgba(236, 229, 214, 0.88);
    background-image: linear-gradient(rgba(31, 38, 48, 0.09), rgba(31, 38, 48, 0.09));
    clip-path: polygon(
        0 10%, 5% 0, 30% 6%, 60% 0, 96% 5%, 100% 0,
        97% 50%, 100% 100%, 70% 94%, 35% 100%, 4% 94%, 0 100%, 3% 50%
    );
}

.foto::before {
    left: 10%;
    transform: rotate(-5deg);
}

.foto::after {
    right: 10%;
    transform: rotate(6deg);
}

@media (min-width: 600px) {
    .foto {
        padding: 12px 12px 14px;
    }

    .foto::before,
    .foto::after {
        width: 112px;
        height: 30px;
        top: -15px;
    }
}


/* ===== Formularfelder (Startseite und Anfrage) ===== */

.kontakt-form input,
.kontakt-form textarea,
.kontakt-form select,
.anfrage-form input,
.anfrage-form textarea,
.anfrage-form select {
    width: 100%;
    padding: 12px 14px;

    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--linie-stark);
    border-radius: 2px;
    color: var(--tinte);

    font-family: var(--sans);
    /* 16px verhindert das automatische Zoomen auf iPhones */
    font-size: 1rem;
    line-height: 1.4;
}

.kontakt-form textarea,
.anfrage-form textarea {
    min-height: 140px;
    resize: vertical;
}

.kontakt-form input::placeholder,
.kontakt-form textarea::placeholder,
.anfrage-form input::placeholder,
.anfrage-form textarea::placeholder {
    color: rgba(31, 38, 48, 0.45);
}

.kontakt-form input:focus,
.kontakt-form textarea:focus,
.kontakt-form select:focus,
.anfrage-form input:focus,
.anfrage-form textarea:focus,
.anfrage-form select:focus {
    border-color: var(--rost);
    outline: 2px solid var(--rost);
    outline-offset: 0;
}

.kontakt-form input:-webkit-autofill,
.kontakt-form textarea:-webkit-autofill,
.anfrage-form input:-webkit-autofill,
.anfrage-form textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f6f2ea inset;
    -webkit-text-fill-color: var(--tinte);
}

.kontakt-form button[type="submit"]:disabled,
.anfrage-form button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-datenschutz {
    color: var(--tinte-leise);
    font-size: 0.875rem;
    line-height: 1.55;
}

.form-datenschutz a {
    color: var(--tinte);
    text-decoration-color: var(--rost);
    text-underline-offset: 3px;
}

.form-status {
    min-height: 1.5em;
    font-weight: 600;
}

/* Honeypots: fuer Menschen unsichtbar, duerfen nicht sichtbar werden */
.hp-feld,
.anfrage-form .hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Ohne JavaScript: WhatsApp-Hinweis passend zum hellen Papier.
   whatsapp.css ist fuer dunkle Flaechen geschrieben und wird spaeter
   geladen, darum hier mit hoeherer Spezifitaet. */
body .wa-noscript {
    border-color: var(--linie-stark);
    color: var(--tinte);
}


/* ===== Footer ===== */

.footer {
    padding: 48px 16px 40px;
    background-color: var(--tinte);
    color: var(--papier);
}

.footer-inner {
    display: grid;
    gap: 28px;
    max-width: var(--breite);
    margin: 0 auto;
}

.footer a {
    color: inherit;
    text-underline-offset: 3px;
}

.footer-title {
    font-size: 1.125rem;
    font-weight: 700;
}

.footer-desc {
    max-width: 40ch;
    margin: 6px 0 10px;
    color: var(--papier-leise);
}

.footer-mail {
    font-family: var(--mono);
    font-size: 0.9375rem;
}

.footer-spalte {
    display: grid;
    align-content: start;
    gap: 14px;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.footer-branchen,
.footer-bottom {
    color: var(--papier-leise);
    font-family: var(--mono);
    font-size: 0.875rem;
}

.footer-branchen {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

/* Branchenseiten markieren sich selbst im Footer */
.footer-branchen a[aria-current="page"] {
    color: var(--papier);
    text-decoration: none;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(236, 229, 214, 0.2);
}

.instagram {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (min-width: 860px) {
    .footer {
        padding: 64px 32px 48px;
    }

    .footer-inner {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        column-gap: 48px;
    }

    .footer-bottom {
        grid-column: 1 / -1;
    }
}


/* ===== Einblenden beim Scrollen (js/reveal.js) =====

   Bewusst nur Deckkraft, keine Bewegung. :where(.js) haelt die
   Spezifitaet niedrig und greift nur, wenn JavaScript laeuft. */

:where(.js) [data-reveal] {
    opacity: 0;
}

:where(.js) [data-reveal].is-revealed {
    animation: lb-einblenden 0.7s ease-out both;
    animation-delay: var(--reveal-delay, 0ms);
}

:where(.js) [data-reveal].reveal-done {
    opacity: 1;
    animation: none;
}

@keyframes lb-einblenden {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    :where(.js) [data-reveal],
    :where(.js) [data-reveal].is-revealed {
        opacity: 1;
        animation: none;
    }

    .knopf,
    .kontakt-form button[type="submit"],
    .hamburger span,
    .nav-cta {
        transition: none;
    }
}