/* Kenala Startseite · Kenala ist ein Unterprodukt von Roman Thomas (Roman, 18.09.2026):
   Farben und Schriften von Roman Thomas, eigen ist nur die Wortbildmarke.
   N27 für Lead, Aaux Pro für Text, Inter für Labels, alles selbst ausgeliefert. */
@font-face{font-family:"N27";src:url(/fonts/n27-medium-sub.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Aaux Pro";src:url(/fonts/aaux-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Aaux Pro";src:url(/fonts/aaux-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/Inter-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --papier:#faf9f6; --nebel:#f1efe9; --schiefer:#343a40; --nebenton:#5e5e5c;
  --safran:#e2581d; --safran-tief:#a8441a; --linie:rgba(52,58,64,.16);
  --schrift:"Aaux Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"N27",system-ui,sans-serif; --label:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--papier);color:var(--schiefer);
  font:400 17px/1.65 var(--schrift);font-feature-settings:"tnum" 1}
.blatt{flex:1;width:100%;max-width:592px;margin:0 auto;padding:clamp(56px,14vh,136px) 16px 64px}
.kopf{margin:0 0 40px}
.absender{margin:12px 0 0 5px;font:600 11px/1.2 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--safran)}
.absender a{color:var(--safran);text-decoration:none}
.absender a:hover{text-decoration:underline}
.kopf h1{margin:0;line-height:0}
/* Größe über die Höhe: 28 px Versalhöhe mobil, 40 px ab Tablet (Tabelle der Festlegung) */
.marke{display:block;height:30px;width:auto;margin:5px}
@media (min-width:640px){.marke{height:44px;margin:7px}.kopf{margin-bottom:56px}}
.lead{font:500 clamp(22px,4.6vw,28px)/1.25 var(--display);margin:0 0 28px;letter-spacing:-.01em}
p{margin:0 0 14px;max-width:560px}
h2{font:600 12px/1.2 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--safran);margin:56px 0 14px}
a{color:var(--schiefer);text-decoration-color:var(--safran-tief);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-color:var(--safran);text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--safran);outline-offset:3px;border-radius:2px}
.weiter{margin-top:56px;padding-top:28px;border-top:1px solid var(--linie);font-weight:700}
.weiter a::after{content:" →";text-decoration:none;display:inline-block;color:var(--safran-tief)}
.kontakt{color:var(--nebenton)}
.kontakt a{color:var(--nebenton);white-space:nowrap}
a[href^="mailto:"]{white-space:nowrap}
.fuss{width:100%;max-width:592px;margin:0 auto;padding:24px 16px 40px;color:var(--nebenton);font-size:14px;line-height:1.5;
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.fuss::before{content:"";flex-basis:100%;border-top:1px solid var(--linie);margin-bottom:8px}
.fuss p{margin:0}
.fuss nav{display:flex;gap:20px}
.fuss a{color:var(--nebenton)}
/* Illustrationen: Satzspalte gedanklich 6 Spalten (80 px, Gutter 16), Bilder linksbündig,
   Rhythmus aus der Zeile 28 px (17 × 1,65), Empfehlung der Gestalterin 18.09.2026 */
.bild{margin:28px 0 0}
.bild img{display:block;width:100%;height:auto;border-radius:4px}
.bild--hoch{width:max(208px,48.6%)}
.bild--hoch img{aspect-ratio:4/5;object-fit:cover;object-position:54% 50%}
.bild--quer{width:min(100%,368px)}
/* Unterseiten */
.recht h1{font:600 12px/1.2 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--safran);margin:0 0 24px}
.recht h2{margin-top:36px}
.recht .zur{display:inline-block;margin-bottom:40px;line-height:0}
.recht .zur img{height:22px;width:auto;margin:4px}
.recht address{font-style:normal}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}