/* Nubro Digital · Planet Designs (designs.html) · Stand 11.10.2026
   Thema Atelier: warmes Anthrazit, Pfirsich, Taupe, Creme, sparsam Waldgrün (Variablen aus site.css, Abschnitt „Planeten“).
   Überschriften in Fraunces (72pt Soft, Light mit Kursive), Text in Geist. Asymmetrisch, viel Luft, Papier und Farbmuster
   statt Technik. Baut auf site.css auf: Kopfleiste, Glanzknopf, Leuchtrand-Karte, Formularfelder, Fußzeile.
   Bewegung: Der Planet landet und schwebt (nur CSS), die Schnittmarken der leeren Rahmen setzen sich einmal
   (designs.js). Bei reduzierter Bewegung steht alles still. */

/* Fraunces (SIL Open Font License, fonts/LIZENZ-fraunces.txt) */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/Fraunces-Soft-300.ttf) format('truetype')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300;font-display:swap;src:url(../fonts/Fraunces-Soft-300-italic.ttf) format('truetype')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/Fraunces-Soft-600.ttf) format('truetype')}

:root{
  --at-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --at-taupe:#A99E92;
  --at-papier:#F2EFE9;--at-tusche:#1D1B19;--at-tusche-leise:#5E5650;--at-rand-papier:#8A7F75;--at-gruen-tief:#1E6A43;--at-fehler:#9A4321;
  --at-luft:clamp(120px,14vw,220px);
  --at-spalt:clamp(16px,2.2vw,36px);
  /* Papierkorn: helle Fasern für dunkles Papier, dunkle für helles */
  --at-korn-hell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .91 0 0 0 0 .85 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  --at-korn-dunkel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .12 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* Grundton der Seite */
body{background:var(--p-grund);color:var(--p-tinte)}
::selection{background:var(--p1);color:var(--p-auf)}
:focus-visible{outline-color:var(--p1)}
.hinweis{color:var(--p-leise)}
.hinweis a{color:inherit}

/* Kopfleiste: gleiche Leiste, nur der Schatten im warmen Grundton und etwas dichter, damit die Links auch über dem
   hellen Auftragszettel lesbar bleiben (der Zettel ist nur halb so breit, darum ohne data-nav-hell) */
.nav:not(.nav--hell)::before{background:linear-gradient(to bottom,rgba(22,24,27,.95),rgba(22,24,27,.87) 50%,rgba(22,24,27,0))}
.nav:not(.nav--hell) .nav__links{color:var(--p-leise)}
.nav--hell .nav__links a[aria-current="page"]{color:#16181B}
.nav--hell .nav__links a[data-ziel="design"]{--nav-farbe:#8A6E5C}

/* Bausteine */
.at-h2{margin:0;font:300 clamp(40px,5.2vw,82px)/1.02 var(--at-serif);letter-spacing:-.024em;color:var(--p-tinte);text-wrap:balance}
.at-text{max-width:42ch;font-size:clamp(17px,1.25vw,19px);line-height:1.65;color:var(--p-leise);text-wrap:pretty}
.at-abschnitt{margin-top:var(--at-luft)}

/* SVG-Druckfarben der kleinen Papiere */
.f-pf{fill:var(--p1)}
.f-ta{fill:var(--at-taupe)}
.f-cr{fill:var(--p-tinte)}
.f-gr{fill:var(--p2)}
.f-an{fill:var(--p-grund)}
.f-leise{opacity:.45}

/* ── 1 · Ankunft ─────────────────────────────────────────────────────────── */
.at-ankunft{position:relative;isolation:isolate;display:flex;align-items:center;min-height:100vh;min-height:100svh;padding:clamp(128px,18vh,190px) 0 clamp(72px,11vh,128px);overflow:hidden}
/* ein paar Sterne nur rund um den Planeten, dazu sein warmes Licht */
.at-ankunft::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:url("erde/sterne.svg") 0 0/320px 320px;opacity:.3;
  -webkit-mask-image:radial-gradient(62% 82% at 92% 46%,#000 30%,transparent 78%);mask-image:radial-gradient(62% 82% at 92% 46%,#000 30%,transparent 78%)}
.at-ankunft::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(42% 58% at 100% 50%,rgba(236,217,203,.1),transparent 72%)}
.at-planet{--gr:min(76vw,1120px);position:absolute;z-index:-1;top:50%;right:calc(var(--gr) * -.47);width:var(--gr);aspect-ratio:1;margin:0;transform:translateY(-50%)}
.at-planet__bild{display:block;width:100%;height:100%}
/* Beschriftung wie mit Bleistift neben einer Skizze: Linie vom Namen zum Rand des Planeten */
.at-planet__notiz{position:absolute;right:93.3%;top:58%;display:grid;justify-items:start;font:300 italic clamp(17px,1.35vw,22px)/1.2 var(--at-serif);color:var(--at-taupe);white-space:nowrap}
.at-planet__strich{justify-self:end;width:clamp(76px,7.4vw,118px);height:auto;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;overflow:visible}
.at-planet__strich circle{fill:currentColor;stroke:none}
.at-planet__notiz span{margin-top:6px}

.at-ankunft__raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--at-spalt)}
.at-titel{grid-column:1 / -1;margin:0;font:300 clamp(50px,7.4vw,124px)/.98 var(--at-serif);letter-spacing:-.032em;color:var(--p-tinte)}
.at-titel__zeile{display:block}
/* zweite Zeile kursiv und um genau eine Spalte eingerückt: dort beginnt auch der Text darunter */
.at-titel__zeile--kursiv{padding-left:calc((100% - 11 * var(--at-spalt)) / 12 + var(--at-spalt));font-style:italic;letter-spacing:-.02em}
.at-ankunft__text{grid-column:2 / span 5;display:grid;gap:clamp(26px,2.6vw,40px);margin-top:clamp(30px,3.6vw,56px)}
.at-lead{max-width:40ch;font-size:clamp(18px,1.35vw,21px);line-height:1.6;color:var(--p-leise);text-wrap:pretty}
.at-ankunft__aktion{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px}
.at-preis{display:flex;align-items:baseline;gap:10px;margin:0;white-space:nowrap}
.at-preis__zahl{font:300 italic clamp(40px,3.4vw,54px)/1 var(--at-serif);letter-spacing:-.02em;color:var(--p1)}
.at-preis__wort{font-size:16px;color:var(--p-leise)}

/* ── 2 · Was wir gestalten ───────────────────────────────────────────────── */
.at-kopf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--at-spalt);row-gap:20px;align-items:end;margin-bottom:clamp(56px,6.5vw,104px)}
.at-kopf .at-h2{grid-column:1 / span 7}
.at-kopf .at-text{grid-column:9 / span 4;padding-bottom:.6em}
.at-arten__liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(24px,3vw,52px);row-gap:72px}
.at-art{position:relative;display:flex;flex-direction:column;gap:12px}
.at-art__buehne{display:flex;align-items:flex-end;justify-content:flex-start;height:clamp(220px,19vw,290px);margin-bottom:22px}
/* Jede Art als Papier im echten Seitenverhältnis, alle auf einer Linie abgelegt. Nicht drehen: in Chromium verliert
   der Leuchtrand (Maske plus backdrop-filter) unter einer Transformation seine Maske und überstrahlt das ganze Papier. */
.at-ding{--glut-r:4px;box-shadow:inset 0 0 0 1px var(--p-linie),0 22px 34px -20px rgba(0,0,0,.75),0 3px 6px -2px rgba(0,0,0,.35)}
.at-ding .glutkarte__inhalt{position:absolute;inset:0;background:var(--at-korn-hell) 0 0/160px 160px}
.at-ding svg{display:block;width:100%;height:100%}
.at-ding .glutkarte__licht{filter:blur(24px) saturate(1.4) brightness(1.1);opacity:.34}
.at-ding .glutkarte__rand{border-width:2px;-webkit-backdrop-filter:blur(8px) brightness(1.7) saturate(1.3);backdrop-filter:blur(8px) brightness(1.7) saturate(1.3)}
.at-ding--logo{width:min(70%,168px);aspect-ratio:1}
.at-ding--flyer{width:min(60%,154px);aspect-ratio:105/148}
.at-ding--karte{--glut-r:3px;width:min(94%,236px);aspect-ratio:85/55}
.at-ding--post{--glut-r:6px;width:min(68%,170px);aspect-ratio:4/5}
.at-hilfslinie{fill:none;stroke:var(--at-taupe);stroke-width:.6;stroke-dasharray:1.4 2.4;opacity:.55}
.at-ring{fill:none;stroke:var(--p-tinte);stroke-width:1.6;stroke-linecap:round}
.at-ring--hinten{opacity:.4}
.at-siegel{fill:none;stroke:var(--p-tinte);stroke-width:.8;stroke-dasharray:1.2 1.4;opacity:.85}
.at-art__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.at-art__name{margin:0;font:300 clamp(25px,2vw,31px)/1.12 var(--at-serif);letter-spacing:-.015em;color:var(--p-tinte);text-wrap:balance}
.at-art__preis{flex:none;font:300 italic clamp(20px,1.6vw,24px)/1 var(--at-serif);color:var(--p1)}
.at-art__text{max-width:34ch;font-size:16px;line-height:1.6;color:var(--p-leise);text-wrap:pretty;-webkit-hyphens:auto;hyphens:auto}
.at-art__link{align-self:flex-start;margin-top:6px;font-weight:500;font-size:15px;color:var(--p-tinte);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(236,217,203,.45);text-underline-offset:6px;transition:text-decoration-color .25s}
/* Die ganze Art ist klickbar (ein Link, ein Tabstopp); der Fokusrahmen liegt um alles */
.at-art__link::after{content:"";position:absolute;inset:-14px;z-index:4;border-radius:10px}
.at-art:hover .at-art__link{text-decoration-color:var(--p1)}
.at-art__link:focus-visible{outline:none}
.at-art__link:focus-visible::after{outline:2px solid var(--p1);outline-offset:0}

/* ── 3 · So läuft es ─────────────────────────────────────────────────────── */
.at-ablauf__raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--at-spalt);align-items:start}
.at-ablauf .at-h2{grid-column:1 / span 4}
.at-schritte{grid-column:5 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,52px)}
.at-schritt{display:grid;align-content:start}
.at-schritt:nth-child(2){margin-top:clamp(0px,6vw,100px)}
.at-schritt:nth-child(3){margin-top:clamp(0px,12vw,200px)}
.at-schritt__nr{margin-bottom:clamp(14px,1.6vw,24px);font:300 italic clamp(76px,7.4vw,124px)/.8 var(--at-serif);color:var(--at-taupe)}
.at-schritt__satz{font:300 clamp(24px,2.1vw,32px)/1.16 var(--at-serif);letter-spacing:-.012em;color:var(--p-tinte);text-wrap:balance}
.at-schritt__mehr{max-width:28ch;margin-top:12px;font-size:16px;line-height:1.6;color:var(--p-leise)}

/* ── 4 · Beispiele folgen: leere Blätter mit Schnittmarken ───────────────── */
.at-beispiele{overflow-x:clip}   /* Schnittmarken starten etwas größer und dürfen dabei nicht über den Rand ragen */
.at-beispiele__raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--at-spalt);align-items:center}
.at-wand{grid-column:1 / span 8;display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,2.6vw,44px);padding:28px 18px}
.at-beispiele__text{grid-column:10 / -1;display:grid;gap:22px}
.at-blatt{flex:none;display:grid;justify-items:center;gap:16px}
.at-blatt--hoch{--b:clamp(120px,12.5vw,184px);--f:105/148}
.at-blatt--quer{--b:clamp(128px,13vw,196px);--f:85/55}
.at-blatt--quadrat{--b:clamp(104px,10.4vw,152px);--f:1}
.at-blatt--post{--b:clamp(112px,11.2vw,164px);--f:4/5}
.at-blatt__papier{position:relative;display:grid;place-items:center;width:var(--b);aspect-ratio:var(--f);border-radius:2px;background:var(--at-korn-hell) 0 0/160px 160px,var(--p-flaeche);box-shadow:inset 0 0 0 1px rgba(51,55,60,.9),0 18px 30px -22px rgba(0,0,0,.8)}
.at-blatt__papier::before{--m:rgba(185,174,162,.75);content:"";position:absolute;inset:-15px;pointer-events:none;
  background:linear-gradient(var(--m),var(--m)) 0 15px/10px 1px no-repeat,linear-gradient(var(--m),var(--m)) 15px 0/1px 10px no-repeat,
    linear-gradient(var(--m),var(--m)) 100% 15px/10px 1px no-repeat,linear-gradient(var(--m),var(--m)) calc(100% - 15px) 0/1px 10px no-repeat,
    linear-gradient(var(--m),var(--m)) 0 calc(100% - 15px)/10px 1px no-repeat,linear-gradient(var(--m),var(--m)) 15px 100%/1px 10px no-repeat,
    linear-gradient(var(--m),var(--m)) 100% calc(100% - 15px)/10px 1px no-repeat,linear-gradient(var(--m),var(--m)) calc(100% - 15px) 100%/1px 10px no-repeat;
  transition:opacity .7s var(--auftritt),transform .8s var(--auftritt)}
.at-wand--wartet .at-blatt__papier::before{opacity:0;transform:scale(1.2)}
.at-blatt:nth-child(2) .at-blatt__papier::before{transition-delay:.1s}
.at-blatt:nth-child(3) .at-blatt__papier::before{transition-delay:.2s}
.at-blatt:nth-child(4) .at-blatt__papier::before{transition-delay:.3s}
.at-blatt__text{padding:8px;font:300 italic clamp(14px,1.1vw,16px)/1.3 var(--at-serif);color:var(--p-leise);text-align:center}
.at-blatt__art{max-width:var(--b);font-size:13px;line-height:1.4;color:var(--p-leise);text-align:center}

/* ── 5 · Anfrage: der Auftragszettel ─────────────────────────────────────── */
.at-anfrage{overflow-x:clip}   /* das schräge Blatt unter dem Zettel darf nicht über den Bildschirmrand ragen */
.at-anfrage__raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--at-spalt);align-items:start}
.at-anfrage__text{grid-column:1 / span 5;display:grid;gap:22px;position:sticky;top:130px}
.at-zettel-stapel{grid-column:6 / -1;position:relative}
.at-zettel-stapel__unten{position:absolute;inset:0;border-radius:3px;background:var(--at-korn-dunkel) 0 0/160px 160px,var(--at-taupe);opacity:.5;transform:rotate(2.2deg) translate(1.2%,1.4%);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.at-zettel{position:relative;display:grid;gap:26px;padding:clamp(26px,4vw,60px);border-radius:3px;background:var(--at-korn-dunkel) 0 0/160px 160px,var(--at-papier);color:var(--at-tusche);color-scheme:light;box-shadow:0 46px 90px -44px rgba(0,0,0,.85),0 2px 3px rgba(0,0,0,.25)}
.at-zettel__kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;padding-bottom:20px;border-bottom:1px solid rgba(29,27,25,.16)}
.at-zettel__titel{font:300 italic clamp(30px,2.6vw,40px)/1 var(--at-serif);letter-spacing:-.015em;color:var(--at-tusche)}
.at-zettel__preis{font-size:15px;color:var(--at-tusche-leise)}
.at-zettel__felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
.at-feld{display:grid;align-content:start;gap:8px}
.at-feld--breit{grid-column:1 / -1}
.at-zettel .lbl{font:500 15px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--at-tusche)}
.at-zettel .input{border-color:var(--at-rand-papier);background-color:#FBFAF7;color:var(--at-tusche);font-size:16px}
.at-zettel .input::placeholder{color:#7C736B}
.at-zettel .input:focus{border-color:var(--at-tusche);box-shadow:0 0 0 3px rgba(169,158,146,.5)}
.at-zettel textarea.input{min-height:150px;resize:vertical;font:400 16px/1.55 var(--sans)}
.at-zettel select.input{cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--at-tusche) 50%),linear-gradient(135deg,var(--at-tusche) 50%,transparent 50%)}
.at-zettel select.input option{background:#FBFAF7;color:var(--at-tusche)}
.at-zettel .hinweis{font-size:14px;line-height:1.5;color:var(--at-tusche-leise)}
.at-zettel .check{font-size:14.5px;line-height:1.55;color:var(--at-tusche)}
.at-zettel .check input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--p2)}
.at-zettel .check a{color:inherit;text-underline-offset:2px}
.at-zettel .fehler{margin:0;font-size:14px;color:var(--at-fehler)}
.at-zettel .input[aria-invalid="true"]{border-color:var(--at-fehler);box-shadow:0 0 0 1px var(--at-fehler)}
.at-zettel .input[aria-invalid="true"]:focus{box-shadow:0 0 0 1px var(--at-fehler),0 0 0 4px rgba(154,67,33,.18)}
.at-zettel .status{font-weight:500;font-size:15.5px;color:var(--at-gruen-tief)}
.at-zettel :focus-visible{outline-color:var(--at-tusche)}
.at-zettel .glanzknopf{--g-farbe:var(--p2)}
.at-zettel__senden{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
/* Kurz zeigen, was sich geändert hat, wenn eine Art von oben übernommen wurde */
.at-zettel select.input.ist-neu{animation:at-gewaehlt 1.8s ease-out .45s}
@keyframes at-gewaehlt{0%{box-shadow:0 0 0 0 rgba(47,138,88,0)}25%{box-shadow:0 0 0 5px rgba(47,138,88,.38)}100%{box-shadow:0 0 0 5px rgba(47,138,88,0)}}

/* ── 6 · Kurz gefragt ────────────────────────────────────────────────────── */
.at-fragen__raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--at-spalt);align-items:start}
.at-fragen .at-h2{grid-column:1 / span 4}
.at-fragen__liste{grid-column:6 / -1}
.at-fragen__liste details{border-top:1px solid var(--p-linie)}
.at-fragen__liste details:last-child{border-bottom:1px solid var(--p-linie)}
.at-fragen__liste summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;list-style:none;cursor:pointer;font:300 clamp(21px,1.75vw,27px)/1.25 var(--at-serif);letter-spacing:-.01em;color:var(--p-tinte)}
.at-fragen__liste summary::-webkit-details-marker{display:none}
.at-fragen__liste summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(236,217,203,.35);background:linear-gradient(var(--p1),var(--p1)) center/11px 1.5px no-repeat,linear-gradient(var(--p1),var(--p1)) center/1.5px 11px no-repeat;transition:rotate .35s var(--auftritt),border-color .25s}
.at-fragen__liste summary:hover::after{border-color:var(--p1)}
.at-fragen__liste details[open] summary::after{rotate:45deg}
.at-fragen__liste p{max-width:58ch;padding:0 0 28px;font-size:17px;line-height:1.65;color:var(--p-leise)}
.at-ust{grid-column:6 / -1;margin-top:22px}

/* ── 7 · Fußzeile (Struktur aus dem Briefing, hier nur eingefärbt) ───────── */
.bk-fuss{margin-top:var(--at-luft);padding-bottom:36px}
.bk-fuss .abspann__ki{margin-top:4px}
.fuss{border-top-color:var(--p-linie);color:var(--p-leise)}
.fuss__wer strong{color:var(--p-tinte)}
.fuss__links a{text-decoration-color:rgba(236,217,203,.3)}
.fuss__links a:hover{color:var(--p-tinte);text-decoration-color:var(--p1)}
.abspann__ki,.abspann__copy{color:var(--p-leise)}

/* ── Bewegung: zwei ruhige Momente ───────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .at-planet{animation:at-landen 1.8s var(--auftritt) both}
  .at-planet__bild{animation:at-schweben 18s ease-in-out 1.8s infinite}
  .at-planet__notiz{animation:at-einblenden 1.2s ease 1.1s both}
}
@keyframes at-landen{from{opacity:0;translate:7% 1%;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes at-schweben{0%,100%{translate:0 0;rotate:0deg}50%{translate:-8px -16px;rotate:-1.6deg}}
@keyframes at-einblenden{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .at-blatt__papier::before,.at-art__link,.at-fragen__liste summary::after{transition:none}
  .at-zettel select.input.ist-neu{animation:none}
}

/* ── Breiten ─────────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .at-arten__liste{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:88px}
  .at-kopf .at-h2{grid-column:1 / span 8}
  .at-kopf .at-text{grid-column:9 / -1}
  .at-ablauf .at-h2{grid-column:1 / -1;margin-bottom:56px}
  .at-schritte{grid-column:1 / -1}
  .at-wand{grid-column:1 / -1;order:2;margin-top:48px}
  .at-beispiele__text{grid-column:1 / span 8;order:1}
  .at-anfrage__text{grid-column:1 / span 5}
  .at-zettel-stapel{grid-column:6 / -1}
}
@media (max-width:899.98px){
  .at-ankunft{display:block;min-height:0;padding:84px 0 24px}
  .at-planet{position:relative;top:auto;right:auto;--gr:min(112vw,620px);transform:none;margin:0 calc(var(--gr) * -.3) -2vw auto}
  .at-planet__notiz{right:89%;top:70%}
  .at-ankunft__raster{display:block}
  .at-titel{font-size:clamp(42px,9.6vw,76px)}
  .at-titel__zeile--kursiv{padding-left:.62em}
  .at-ankunft__text{margin-top:28px}
  .at-kopf .at-h2,.at-kopf .at-text{grid-column:1 / -1}
  .at-schritte{grid-template-columns:1fr;row-gap:56px}
  .at-schritt:nth-child(n){margin-top:0}
  .at-schritt{grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-items:start}
  .at-schritt__nr{grid-row:span 2;margin:0;font-size:76px}
  .at-schritt__satz{padding-top:6px}
  .at-beispiele__text{grid-column:1 / -1}
  .at-wand{flex-wrap:wrap;justify-content:center;gap:44px 36px}
  .at-anfrage__text{grid-column:1 / -1;position:static;margin-bottom:48px}
  .at-zettel-stapel{grid-column:1 / -1}
  .at-fragen .at-h2,.at-fragen__liste,.at-ust{grid-column:1 / -1}
  .at-fragen .at-h2{margin-bottom:28px}
}
@media (max-width:560px){
  /* Handy: Papier links, Text rechts, damit die vier Arten nicht endlos untereinander stehen */
  .at-arten__liste{grid-template-columns:1fr;row-gap:52px}
  .at-art{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);column-gap:20px;row-gap:8px;align-items:start}
  .at-art__buehne{grid-column:1;grid-row:1 / span 3;align-items:flex-start;height:auto;margin:4px 0 0}
  .at-art__kopf,.at-art__text,.at-art__link{grid-column:2}
  .at-art__kopf{flex-wrap:wrap;gap:2px 10px}
  .at-art__link{justify-self:start;margin-top:4px}
  .at-art__text{font-size:15.5px}
  .at-ding--logo{width:88%}
  .at-ding--flyer{width:78%}
  .at-ding--karte{width:100%}
  .at-ding--post{width:84%}
  .at-zettel__felder{grid-template-columns:1fr}
  .at-zettel{padding:26px 20px 30px}
  .at-zettel-stapel__unten{transform:rotate(.9deg) translateY(6px)}
  .at-wand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;align-items:end;gap:40px 20px;padding:20px 8px}
  .at-blatt--hoch{--b:min(34vw,140px)}
  .at-blatt--quer{--b:min(38vw,160px)}
  .at-blatt--quadrat{--b:min(30vw,124px)}
  .at-blatt--post{--b:min(32vw,132px)}
  .at-ankunft__aktion{gap:20px 24px}
}
/* Dateien anhängen auf dem hellen Zettel (12.10.2026): Farben des Papiers statt der dunklen Seite */
.at-zettel .dateien{--p-linie:rgba(40,34,28,.38);--p-flaeche:#FFFDF8;--p-leise:#5E554B;--p-tinte:var(--at-tusche);--p1:#2F8A58;--p-auf:#FFFFFF}
/* Beispiele mit Nubro (12.10.2026): echte Bilder statt leerer Blätter, größer, mit KI-Etikett an jedem Bild */
.at-wand--bilder .at-blatt--hoch{--b:clamp(150px,15vw,232px);--f:640/954}
.at-wand--bilder .at-blatt--quer{--b:clamp(176px,17.5vw,268px);--f:800/598}
.at-wand--bilder .at-blatt--quadrat{--b:clamp(132px,13vw,200px);--f:1}
.at-wand--bilder .at-blatt--post{--b:clamp(140px,14vw,214px);--f:640/858}
.at-blatt__bild{display:block;overflow:visible;background:#111316;text-decoration:none}
.at-blatt__bild img{position:relative;z-index:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:2px;transition:transform .5s var(--auftritt),filter .3s}
.at-blatt__bild:hover img,.at-blatt__bild:focus-visible img{transform:translateY(-3px);filter:brightness(1.06)}
.at-blatt__bild:focus-visible{outline:2px solid var(--p1);outline-offset:6px}
.at-blatt__ki{position:absolute;z-index:1;left:6px;bottom:6px;padding:3px 7px 4px;border-radius:999px;background:rgba(14,16,19,.8);color:#F2EFE9;font:600 10px/1.2 var(--sans);letter-spacing:.04em;pointer-events:none}
.at-hinweis-ki{max-width:44ch;padding:12px 14px;border-left:2px solid var(--p1);font-size:14.5px;line-height:1.5;color:var(--p-leise)}
.at-hinweis-ki strong{font-weight:600;color:var(--p-tinte)}
@media (max-width:560px){
  .at-wand--bilder .at-blatt--hoch{--b:min(40vw,180px)}
  .at-wand--bilder .at-blatt--quer{--b:min(42vw,200px)}
  .at-wand--bilder .at-blatt--quadrat{--b:min(38vw,170px)}
  .at-wand--bilder .at-blatt--post{--b:min(38vw,170px)}
}
@media (prefers-reduced-motion:reduce){.at-blatt__bild img{transition:none}}
/* Flache Beispiel-Designs in den vier Karten (12.10.2026) */
.at-ding .glutkarte__inhalt img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}