/* Gemeinsame Gestaltung für Impressum und Datenschutz.
   Übernimmt die Idiome der Landingpage (index.html): Anton versal für die Über-
   schrift, Hanken Grotesk für Zwischentitel, Inter im Fließtext, durchlaufende
   Haarlinien, Creme-Block mit versetztem Schatten.

   P2 — Die Seiten waren typografisch auf Landingpage-Lautstärke gesetzt: H1 bis
   74px (der Poster-Grad des Hero), Lead 21px, Zwischentitel 24px. Das ist die
   Auszeichnung für Sätze, die überzeugen sollen. Impressum und Datenschutz
   sollen nichts überzeugen — sie müssen auffindbar, vollständig und gut lesbar
   sein. Deshalb eine Stufe tiefer auf denselben Leitern:
     Anton   38 statt 74   (der Stationstitel-Grad, nicht der Poster-Grad)
     Hanken  15 statt 24   (Zwischentitel werden Marken, keine Schlagzeilen)
     Inter   15 statt 16   Fliesstext, dafuer Zeilenhoehe 1.65
   Zusaetzlich eine Spalte statt zwei Breiten: Navigation, Text und Fusszeile
   standen vorher auf 1240 / 900 / 1240 und liefen dadurch sichtbar auseinander —
   die Zurueck-Zeile schwebte 300px rechts neben dem Text. Jetzt teilen sich alle
   drei dieselbe Spalte, und die Seite liest sich als Dokument statt als Kampagne. */
:root{
  --ink:#14201E; --petrol:#11796C; --petrold:#0B4A43; --paper:#F4EFE2; --stone:#6E7A76;
  --gold:#E8B53C; --line:#D9CFBA; --cream:#FBF8EC; --sand:#C9A35B;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--petrol)}
/* Eine Spalte fuer alles: 900 statt 1240, damit Navigation, Text und Fusszeile
   an derselben Kante stehen. */
.page{max-width:900px;margin:0 auto;background:var(--paper);min-height:100vh;display:flex;flex-direction:column}

nav{display:flex;justify-content:space-between;align-items:center;padding:18px 34px;border-bottom:1px solid var(--line);font-family:"Hanken Grotesk",sans-serif}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{display:block;height:24px;width:auto}
.back{font-size:13px;text-decoration:none;color:var(--stone)}
.back:hover{color:var(--petrol);text-decoration:underline}

main{flex:1;padding:52px 34px 76px;max-width:none;width:100%}
.eyebrow{font-family:"Hanken Grotesk",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol);font-weight:800}
/* Fester Grad statt clamp: die Ueberschrift soll auf keiner Bildschirmbreite in
   den Poster-Bereich wachsen. */
h1{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:38px;line-height:1.06;letter-spacing:-.01em;margin:12px 0 16px}
/* Lead in Inter statt Hanken: das negative letter-spacing von -.02em ist eine
   Display-Einstellung und macht Fliesstext auf Lesegroesse enger, nicht besser. */
.lead{font-size:17px;line-height:1.55;max-width:64ch;margin:0 0 38px;color:var(--ink)}

/* Zwischentitel als Marke, nicht als Schlagzeile. Die Haarlinie darueber traegt
   die Gliederung; die Schrift muss sie nicht zusaetzlich behaupten. */
h2{font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:15px;letter-spacing:.09em;text-transform:uppercase;margin:38px 0 12px;padding-top:20px;border-top:1px solid var(--line)}
h2:first-of-type{margin-top:0;border-top:2px solid var(--ink)}
h3{font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:13px;letter-spacing:.04em;color:var(--stone);margin:22px 0 6px}

p{font-size:15px;line-height:1.65;margin:0 0 12px;max-width:66ch}
ul{font-size:15px;line-height:1.65;padding-left:20px;margin:0 0 12px;max-width:66ch}
li{margin-bottom:6px}
.small{font-size:13px;color:var(--stone);line-height:1.6;max-width:66ch}
address{font-style:normal;line-height:1.7;font-size:15px}

/* Wie die Belegkarten auf der Startseite: Creme, Rahmen, versetzter Schatten —
   aber flacher. 12/14px ist der Schatten der Hero-Rechnung; eine Anschrift
   braucht nicht dieselbe Praesenz wie die Kennzahl der Seite. */
.block{background:var(--cream);border:1px solid var(--line);box-shadow:6px 7px 0 rgba(20,32,30,.06);padding:18px 22px;margin:0 0 20px;max-width:56ch}
.block p:last-child{margin-bottom:0}

.updated{margin-top:44px;padding-top:16px;border-top:1px solid var(--line);color:var(--stone);font-size:13px}

/* Offener Punkt, noch zu füllen — gleiche Auszeichnung wie auf der Startseite. */
.ph{background:rgba(232,181,60,.28);border-bottom:1px dashed var(--sand);padding:0 3px}

.contact-form{max-width:56ch;margin:0 0 20px;display:flex;flex-direction:column;gap:14px}
.contact-form label{display:flex;flex-direction:column;gap:5px;font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--stone)}
.contact-form input[type=text],.contact-form input[type=email],.contact-form textarea{font:15px/1.5 Inter,system-ui,sans-serif;padding:9px 11px;border:1px solid var(--line);border-radius:5px;background:var(--cream);color:var(--ink);width:100%}
/* Ein Namensfeld ueber die volle Textbreite sieht aus, als erwarte es einen
   Aufsatz. Kurze Eingaben bekommen kurze Felder. */
.contact-form input[type=text],.contact-form input[type=email]{max-width:26rem}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--petrol);outline-offset:1px}
.contact-form textarea{resize:vertical;min-height:100px}
.contact-form .hp{position:absolute;left:-9999px}
/* Sekundaer statt primaer: der Vollton-Knopf mit 5px-Schlagschatten ist auf der
   Startseite "Am Pilot teilnehmen". Derselbe Knopf im Impressum waere der
   lauteste Aufruf der ganzen Seite — an der Stelle, die am wenigsten verkaufen
   soll. */
.contact-form .btn{align-self:flex-start;display:inline-block;background:transparent;color:var(--petrold);text-decoration:none;font-family:"Hanken Grotesk",sans-serif;font-weight:800;border-radius:999px;padding:10px 20px;border:2px solid var(--petrol);transition:.12s ease;cursor:pointer;font-size:14px}
.contact-form .btn:hover{background:var(--petrol);color:var(--paper)}

footer{border-top:1px solid var(--line);padding:20px 34px;display:flex;justify-content:space-between;gap:16px;color:var(--stone);font-size:12px;flex-wrap:wrap}
footer a{text-decoration:none;color:inherit}
footer a:hover{color:var(--ink)}

@media(max-width:900px){
  nav{padding:14px 20px}
  main{padding:34px 20px 56px}
  h1{font-size:31px}
  .block{box-shadow:5px 6px 0 rgba(20,32,30,.06);padding:16px 18px}
  footer{padding:18px 20px;display:block}
}