/* ============================================================
   LumiFilms — Entwurf 2, 2026-09-13
   Komplett neu nach Michaels Kritik am ersten Entwurf.

   WAS ER GESAGT HAT, UND WAS DARAUS WURDE
   "Die Kategorien 1 bis 7 gefallen mir nicht, der Trailer zeigt
    die Referenzen ja schon"
      -> Die nummerierte Werkliste ist ERSATZLOS WEG. Sie war
         der Kern von Entwurf 1 und schlicht eine zweite
         Verpackung fuer dasselbe redaktionelle Denken.
   "Der Archiv Part soll praesenter werden, der Kern"
      -> Die Werkschau ist jetzt der groesste Teil der Seite,
         randlos, mit Filmen zwischen den Bildern.
   "weg von dem Redaktionsgedanken"
      -> Serifenschrift raus. Eine einzige Schrift (Archivo
         variabel), dafuer mit Fett- und Breitenachse. Gross,
         schwer, eng. Plakat statt Zeitschrift.
   "LumiF1 schaut ultra billig aus"
      -> Kein Zwei-Spalten-Block mit Bildschirmfoto mehr,
         sondern eine ruhige Zeile weit unten.

   ZIEL DER SEITE (seine Worte): ueber Suchmaschinen Leute
   herbringen, mit Auftritt und Referenzen beeindrucken, und
   das in Preise muenden lassen, die fair, aber premium wirken
   und direkt zu Anfragen fuehren.
   ============================================================ */

/* Eine Datei, beide Achsen: Fett 100-900, Breite 62-125 %.
   Ersetzt Montserrat UND Instrument Serif. */
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-var-latin.woff2") format("woff2-variations");
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-var-latin-ext.woff2") format("woff2-variations");
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --grund:  #08090B;
  --tiefer: #050506;
  --flaeche:#101116;
  --kante:  #1C1E25;
  --ink:    #FFFFFF;
  --dim:    #9BA0AA;
  --faint:  #676C77;
  --gruen:  #7FBF92;      /* CI-Gruen, aufgehellt bis es lesbar ist */
  --papier: #F2F0EA;
  --papier-ink:#0C0D10;

  --s: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rand: clamp(18px, 4vw, 60px);
  --breite: 1400px;
  --t: 8px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--grund); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--grund); color:var(--ink);
  font-family:var(--s); font-size:17px; line-height:1.6; font-weight:400;
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; }
.schale{ width:100%; max-width:var(--breite); margin-inline:auto; padding-inline:var(--rand); }

/* --- Schriftbild: gross, schwer, eng. Kein Redaktionston. --- */
/* 13.09., Michael: "als Schrift bitte etwas duenner und
   kleiner". Von 800 auf 600 Fettgrad, von 6,4vw auf 4,3vw.
   Bei 1440 px sind das 62 statt 92 px. Die Zeile wirkt dadurch
   ruhiger und der ganze Block wird rund 90 px flacher, was
   zusaetzlich hilft, dass er in den ersten Bildschirm passt. */
.gross{
  font-weight:600; font-stretch:92%;
  font-size:clamp(29px,4.3vw,70px);
  line-height:1.0; letter-spacing:-.028em;
  margin:0; text-wrap:balance;
}
.mittel{
  font-weight:800; font-stretch:88%;
  font-size:clamp(30px,3.8vw,58px);
  line-height:.98; letter-spacing:-.03em; margin:0;
}
/* Die EINZIGE Rolle fuer gesperrte Grossbuchstaben: Etiketten. */
.etikett{
  display:inline-block; font-size:11px; font-weight:700; font-stretch:100%;
  letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
}
.lauf-text{ color:var(--dim); font-size:clamp(16px,1.2vw,19px); max-width:62ch; margin:0; }

.knopf{
  display:inline-flex; align-items:center; gap:calc(var(--t)*1.5);
  padding:calc(var(--t)*2.2) calc(var(--t)*4);
  background:var(--ink); color:#000; text-decoration:none;
  font-weight:700; font-size:15px; letter-spacing:-.01em;
  border:1px solid var(--ink);
  transition:background .25s ease, color .25s ease, gap .25s ease;
}
.knopf:hover{ background:transparent; color:var(--ink); gap:calc(var(--t)*2.5); }
.knopf--leer{ background:transparent; color:var(--ink); }
.knopf--leer:hover{ background:var(--ink); color:#000; }

/* ============================================================
   KOPF
   ============================================================ */
.kopf{
  position:fixed; inset:0 0 auto 0; z-index:80;
  padding-block:calc(var(--t)*2.5);
  /* IMMER eine eigene Flaeche, nicht erst beim Scrollen.
     Im ersten Entwurf lag das Menue durchsichtig ueber dem
     Film und war auf hellen Einstellungen unlesbar. Beim
     Kinoband faengt der Film ganz oben an, das Problem waere
     also SOFORT da. Ein durchsichtiger Kopf ueber Bewegtbild
     ist nie verlaesslich lesbar, egal wie man ihn abtoent. */
  background:var(--grund);
  border-bottom:1px solid var(--kante);
  transition:padding .3s ease;
}
.kopf.fest{ padding-block:calc(var(--t)*1.6); }
/* Der Aufmacher beginnt unter dem Kopf. Die genaue Hoehe setzt
   entwurf2.js, damit sie auch nach Schriftwechsel stimmt. */
.auf{ padding-top:var(--kopfhoehe, 72px); }
.kopf-innen{ display:flex; align-items:center; justify-content:space-between; gap:calc(var(--t)*3); }
.marke{ font-weight:800; font-stretch:88%; font-size:19px; letter-spacing:-.02em; text-decoration:none; }
.marke i{ font-style:normal; font-weight:300; color:var(--dim); }
.menue{ display:flex; gap:calc(var(--t)*3.5); align-items:center; }
.menue a{ text-decoration:none; font-size:14px; font-weight:500; color:var(--dim); transition:color .2s ease; }
.menue a:hover{ color:var(--ink); }
.menue-knopf{ display:none; }

/* ============================================================
   VOLLBILD-MENUE, nur Telefon
   Die waagrecht wischbare Linkzeile war abgeschnitten ("Tea...")
   und wirkte wie eine Notloesung. Jetzt Wortmarke plus
   Menueknopf, und die Abschnitte liegen gross und antippbar auf
   einer eigenen Ebene.
   ============================================================ */
.vollmenue{
  position:fixed; inset:0; z-index:90;
  background:var(--grund);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--t)*12) var(--rand) calc(var(--t)*6);
  opacity:0; transition:opacity .28s ease;
}
.vollmenue[hidden]{ display:none; }
.vollmenue.auf{ opacity:1; }
.vollmenue nav{ display:flex; flex-direction:column; }
.vollmenue nav a{
  display:flex; align-items:baseline; gap:calc(var(--t)*2);
  padding-block:calc(var(--t)*2.2);
  border-bottom:1px solid var(--kante);
  text-decoration:none; color:var(--ink);
  font-weight:800; font-stretch:92%;
  font-size:clamp(26px,7vw,38px); letter-spacing:-.03em;
}
.vollmenue nav a span{
  font-size:11px; font-weight:700; letter-spacing:.2em;
  color:var(--gruen); flex:0 0 auto;
}
.vollmenue-knopf{ margin-top:calc(var(--t)*5); justify-content:center; }
.vollmenue-mail{
  margin-top:calc(var(--t)*3); text-align:center;
  font-size:14px; color:var(--dim); text-decoration:none;
}
.menue .knopf{ padding:calc(var(--t)*1.4) calc(var(--t)*2.6); font-size:13px; color:#000; }
.menue .knopf:hover{ color:var(--ink); }

/* ============================================================
   1. AUFMACHER — Kinoband statt Vollbild.

   GEMESSEN 13.09.: In Michaels Trailer sind bei 6 von 18
   Stichproben schwarze Balken EINGEBRANNT, in wechselnder Hoehe
   (46, 102, 103, 132, 134, 135 px bei 844 px Bildhoehe). Ein
   paar Clips liegen im Breitwandformat in einer 16:9-Spur. Auf
   einem formatfuellenden Aufmacher springt das Bildformat
   dadurch sichtbar hin und her, das sieht nach Panne aus.

   LOESUNG: Der Trailer ist auf 1500x624 (2,40:1) beschnitten,
   je 110 px oben und unten weg. Damit verschwinden die
   haeufigsten Balken (102-112 px) exakt, Rest 2 von 18.
   Gezeigt wird das Band in SEINEM Verhaeltnis, nicht
   formatfuellend. Sonst wuerde der Kinoschnitt ein zweites Mal
   beschnitten: bei 1440x900 blieben nur 67 % der Breite uebrig.
   So faellt kein einziges weiteres Pixel weg.

   NEBENEFFEKT, der das Kernproblem endgueltig loest: Die
   Schlagzeile steht UNTER dem Film auf schwarzem Grund. Es
   liegt nie wieder Schrift auf Bewegtbild, also braucht es
   keinen Verlauf und nichts wird abgedunkelt.

   ECHTE ABHILFE waere ein neuer Export aus Michaels Schnitt-
   programm mit einheitlicher Skalierung. Dann koennte der
   Beschnitt wieder kleiner werden.
   ============================================================ */
.auf{ padding-top:0; }
/* 13.09., Michael: "mach den Trailer streifen oben etwas
   schmaler sodass oben Videoproduktion aus Nuernberg schrift
   noch erkennbar ist". Von 2,4:1 auf 3,1:1. Bei 1440 px Breite
   sind das 465 statt 600 px Hoehe. Zusammen mit der kleineren
   Schlagzeile steht die H1 damit im ersten Bildschirm.
   Der Film wird dadurch oben und unten etwas staerker
   beschnitten, was die letzten Restbalken gleich mitnimmt. */
.auf-band{
  position:relative; width:100%; aspect-ratio:3.1/1;
  background:var(--tiefer); overflow:hidden;
}
.auf-film{ width:100%; height:100%; object-fit:cover; }
.auf-text{ padding-block:calc(var(--t)*6) calc(var(--t)*7); }
.auf-text .gross{ max-width:20ch; }
.auf-unten{
  display:flex; flex-wrap:wrap; align-items:center; gap:calc(var(--t)*2);
  margin-top:calc(var(--t)*4);
}
.auf-faecher{ display:flex; flex-wrap:wrap; gap:calc(var(--t)*1); margin-top:calc(var(--t)*3); }
.auf-faecher span{
  font-size:12px; font-weight:600; color:var(--dim);
  padding:calc(var(--t)*.8) calc(var(--t)*1.8);
  border:1px solid var(--kante); border-radius:999px;
}

/* ============================================================
   2. KUNDENLEISTE — Michael: "Die Leiste der Firmen ist cool."
   ============================================================ */
.kunden{ border-block:1px solid var(--kante); overflow:hidden; padding-block:calc(var(--t)*3); background:var(--tiefer); }
.kunden-band{ display:flex; width:max-content; animation:lauf 70s linear infinite; }
.kunden-band:hover{ animation-play-state:paused; }
@keyframes lauf{ to{ transform:translateX(-50%); } }
/* Ein Eintrag ist entweder ein Logo oder ein Wort. Beide sollen
   gleich viel Gewicht haben, sonst zerfaellt die Leiste in
   "wichtig" und "unwichtig". Deshalb dieselbe Hoehe zum Ausrichten
   und dieselbe Deckkraft. */
.kunde{
  display:inline-flex; align-items:center; justify-content:center;
  padding-inline:calc(var(--t)*4.5);
  height:56px; flex:0 0 auto;
  opacity:.55; transition:opacity .3s ease;
}
.kunden-band:hover .kunde{ opacity:.3; }
.kunden-band .kunde:hover{ opacity:1; }

/* Breite und Hoehe stehen je Logo im HTML, weil die optische
   Angleichung schon in den Bilddateien steckt. Eine feste Hoehe
   fuer alle wuerde sie wieder zunichtemachen: Ein breites
   Wortlogo wirkt dann riesig neben einem kompakten Signet. */
/* NICHT width:auto oder height:auto setzen. Beides zusammen
   ueberschreibt die Breiten- und Hoehenangaben im HTML, das Bild
   nimmt dann seine volle Dateigroesse an. Zusammen mit einem
   max-height landeten dadurch ALLE Logos auf derselben Hoehe, und
   die optische Angleichung war hin (gemessen: 22 mal exakt 53 px).
   Die Groessen stehen bewusst je Logo im HTML. */
.kunde-logo{ display:block; max-width:none; }

.kunde--wort{
  white-space:nowrap;
  font-size:clamp(15px,1.35vw,19px); font-weight:600; font-stretch:92%;
  color:var(--ink); letter-spacing:-.01em;
}
.kunde--wort i{ font-style:normal; font-weight:400; color:var(--dim); margin-left:.45em; }
@media (prefers-reduced-motion:reduce){ .kunden-band{ animation:none; } }

/* ============================================================
   3. DIE WERKSCHAU — der Kern der Seite.
   Michael: "praesenter, der Kern, geile Fotos abwechslungsreich
   und praegnant, dazu ein paar mehr Video-Impressionen."

   Randlos ueber die ganze Breite. Zwoelf Spalten, jede Kachel
   bekommt eine eigene Spanne, dense fuellt die Luecken. Dadurch
   entsteht ein unregelmaessiges Raster statt einer Tapete.
   Ruhezustand leicht entsaettigt, bei Beruehrung volle Farbe.
   ============================================================ */
.schau{ padding-top:calc(var(--t)*14); }
.schau-kopf{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:calc(var(--t)*3); margin-bottom:calc(var(--t)*6); }

/* --- Die Wand ------------------------------------------------
   ERST als 12-Spalten-Raster gebaut, das war falsch: Die erste
   Reihe belegte 4+6 = 10 Spalten, und keine Kachel passte in die
   uebrigen 2. Rechts blieb ein sichtbares Loch. Mit Spannen aus
   {3,4,5,6,8} geht 12 nicht verlaesslich auf.

   Jetzt echtes Mauerwerk ueber Spalten. Zwei Gewinne:
   1. Es gibt KEINE Loecher, egal in welcher Reihenfolge.
   2. Jedes Bild behaelt sein eigenes Verhaeltnis. Nichts wird
      beschnitten. Die Abwechslung kommt aus den Fotos selbst,
      hochkant bleibt hochkant. Genau das, was Michael wollte.
   Den Takt geben stattdessen die vollbreiten Filmbaender, die
   die Wand in Bloecke teilen.
   ------------------------------------------------------------ */
/* --- Die Wand ------------------------------------------------
   ERST 12-Spalten-Raster: liess Loecher.
   DANN CSS-Spalten (column-count): keine Loecher, aber die
   Spalten enden unterschiedlich hoch, unten blieb Platz stehen.
   Michael am 14.09.: "schau mal wie du es alles anordnest damit
   die Kacheln nicht zu viel space am ende haben sondern schoen
   abschliessen".

   JETZT vier feste Spalten. Die Verteilung rechnet
   tools/wand-bauen.py aus: Jedes Bild bekommt seine echte Hoehe
   bei gleicher Spaltenbreite, dann wandert es immer in die
   aktuell niedrigste Spalte. Ergebnis ist eine nahezu gerade
   Unterkante. Jedes Bild behaelt sein Verhaeltnis, es wird
   weiterhin nichts beschnitten.
   ------------------------------------------------------------ */
.wand{ display:flex; gap:6px; padding-inline:6px; align-items:flex-start; }
/* Zwei Fassungen, siehe Kommentar im HTML. */
.wand--knapp{ display:none; }
.spalte{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:6px; }
.kachel{
  position:relative; overflow:hidden; margin:0;
  background:var(--flaeche); display:block;
}
.kachel img,.kachel video{
  width:100%; height:auto; display:block;
  filter:grayscale(.35) brightness(.85) contrast(1.05);
  transition:filter .5s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.kachel:hover img,.kachel:hover video{ filter:none; transform:scale(1.04); }

/* Vollbreite Filmbaender: geben der Wand Rhythmus und sind die
   praegnanten Momente, die im Mauerwerk sonst fehlen wuerden. */
.band{
  position:relative; overflow:hidden;
  margin:6px 6px 6px; background:var(--tiefer);
}
.band video,.band img{ width:100%; height:auto; display:block; }
.band figcaption{
  position:absolute; left:0; bottom:0; z-index:2;
  padding:calc(var(--t)*2) calc(var(--t)*3);
  font-size:12px; font-weight:600; color:var(--ink);
  background:linear-gradient(to top, rgba(0,0,0,.8), transparent);
  width:100%;
}
.band figcaption i{ font-style:normal; color:var(--dim); font-weight:400; margin-left:.5em; }

/* Bildunterschrift, erscheint erst bei Beruehrung */
.kachel figcaption{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:calc(var(--t)*2);
  font-size:12px; font-weight:600; color:var(--ink);
  background:linear-gradient(to top, rgba(0,0,0,.82), transparent);
  opacity:0; transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
}
.kachel:hover figcaption{ opacity:1; transform:none; }
.kachel figcaption i{ font-style:normal; color:var(--dim); font-weight:400; margin-left:.5em; }

/* Filmkacheln bekommen ein kleines Zeichen, damit man sie
   erkennt, bevor sie laufen. */
.kachel--film::before,.band--film::before{
  content:""; position:absolute; top:calc(var(--t)*1.5); left:calc(var(--t)*1.5); z-index:3;
  width:9px; height:9px; border-radius:50%;
  background:var(--gruen); box-shadow:0 0 0 3px color-mix(in srgb, var(--gruen) 22%, transparent);
}

/* ============================================================
   LumiF1 — zweiter Anlauf.
   Erst ein Zwei-Spalten-Block mit Bildschirmfoto, Michaels
   Urteil: "schaut ultra billig und kacke aus". Dann eine reine
   Textzeile, sein Urteil: "habe ich wirklich uebersehen".

   Jetzt die Mitte: eigener Streifen mit dem LumiF1-Zeichen,
   einer Zahl und einem Pfeil. Sichtbar genug, um wahrgenommen
   zu werden, klein genug, um nicht mit den Referenzen zu
   konkurrieren. Steht direkt unter der Werkschau, wie Michael
   es wollte.
   ============================================================ */
.f1{ margin:calc(var(--t)*3) var(--rand) 0; }
.f1-streifen{
  display:flex; align-items:center; gap:calc(var(--t)*3);
  padding:calc(var(--t)*3) calc(var(--t)*4);
  background:var(--flaeche); border:1px solid var(--kante);
  text-decoration:none; color:var(--dim);
  transition:background .3s ease, border-color .3s ease;
}
.f1-streifen:hover{ background:#15161C; border-color:#2C2F38; }
.f1-zeichen{
  width:56px; height:56px; flex:0 0 56px; border-radius:50%;
  background:#000; padding:0;
}
.f1-text{ flex:1 1 auto; min-width:0; }
.f1-text b{ display:block; color:var(--ink); font-weight:700; font-size:17px; letter-spacing:-.02em; }
.f1-text span{ font-size:14px; }
.f1-zahl{
  flex:0 0 auto; text-align:right; padding-right:calc(var(--t)*2);
  border-right:1px solid var(--kante); margin-right:calc(var(--t)*1);
}
.f1-zahl b{ display:block; font-weight:800; font-stretch:88%; font-size:26px; letter-spacing:-.03em; color:var(--ink); line-height:1; }
.f1-zahl span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.f1-pfeil{ flex:0 0 auto; font-size:22px; color:var(--faint); transition:transform .3s cubic-bezier(.2,.7,.3,1), color .3s ease; }
.f1-streifen:hover .f1-pfeil{ transform:translateX(6px); color:var(--ink); }

/* 14.09., Michael: "Lass uns das anders machen, iwie mit zwei so
   art schachmuster wie von so einer startlinie getrennten balken
   und dazwischen steht das dann!"

   Zwei Zielflaggen-Streifen, oben und unten, dazwischen der Inhalt
   auf schwarzem Grund. Das Muster kommt aus zwei gekreuzten
   Farbverlaeufen, also ohne Bilddatei und ohne Ladezeit.
   Die Creme-Fassung ist raus. */
.f1-streifen--hell{ background:#000; border:none; color:var(--dim); flex-direction:column; gap:0; padding:0; }
.f1-streifen--hell::before,
.f1-streifen--hell::after{
  content:""; display:block; width:100%; height:16px; flex:0 0 16px;
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#000 25%,transparent 25%,transparent 75%,#000 75%),
    linear-gradient(45deg,#000 25%,transparent 25%,transparent 75%,#000 75%);
  background-size:16px 16px;
  background-position:0 0, 8px 8px;
}
.f1-streifen--hell .f1-innen{
  display:flex; align-items:center; gap:calc(var(--t)*3);
  width:100%; padding:calc(var(--t)*3) calc(var(--t)*4);
}
.f1-streifen--hell .f1-text b,
.f1-streifen--hell .f1-zahl b{ color:#fff; }
.f1-streifen--hell .f1-zahl{ border-right-color:#333; }
.f1-streifen--hell .f1-zahl span,
.f1-streifen--hell .f1-pfeil{ color:#8A8F99; }
.f1-streifen--hell:hover{ background:#000; }
.f1-streifen--hell:hover .f1-pfeil{ color:#fff; }
.f1-streifen--hell .f1-zeichen{ background:transparent; }

@media (max-width:700px){
  .f1-streifen,.f1-streifen--hell .f1-innen{ flex-wrap:wrap; gap:calc(var(--t)*2); }
  .f1-zahl{ border-right:none; padding-right:0; }
}

/* ============================================================
   4. TON — der einzige helle Abschnitt.
   ============================================================ */
/* 14.09.: Michael stoerte die leere dunkle Flaeche unter der
   Werkschau. Der LumiF1-Streifen sitzt jetzt ganz oben in diesem
   hellen Abschnitt und uebernimmt den optischen Bruch, deshalb
   braucht es davor keinen grossen Abstand mehr. */
.ton{ background:var(--papier); color:var(--papier-ink); padding-block:calc(var(--t)*5) calc(var(--t)*15); margin-top:calc(var(--t)*4); }
.ton .etikett{ color:#6B6F79; }
.ton .lauf-text{ color:#33363D; }
.ton-raster{ display:grid; grid-template-columns:1.1fr .9fr; gap:calc(var(--t)*9); align-items:start; }
.probe{ border-top:1px solid #D5D2CA; padding-block:calc(var(--t)*2.5); }
.probe-kopf{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:calc(var(--t)*1.5); }
.probe-titel{ font-weight:700; font-stretch:92%; font-size:21px; letter-spacing:-.02em; }
.probe-wer{ font-size:12px; color:#6B6F79; }
.probe audio{ width:100%; height:34px; }

/* ============================================================
   5. ABLAUF  6. PREISE  7. TEAM  8. KONTAKT
   ============================================================ */
.block{ padding-block:calc(var(--t)*15); border-bottom:1px solid var(--kante); }
.block-kopf{ margin-bottom:calc(var(--t)*7); }

.schritte{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:calc(var(--t)*4); }
.schritt{ border-top:2px solid var(--ink); padding-top:calc(var(--t)*2.5); }
.schritt-nr{ font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--gruen); }
.schritt h3{ font-weight:800; font-stretch:92%; font-size:23px; letter-spacing:-.025em; margin:calc(var(--t)*1.5) 0 calc(var(--t)*1.5); line-height:1.05; }
.schritt p{ margin:0; font-size:15px; color:var(--dim); }

/* Preise: premium heisst Ruhe und Luft, nicht Zierrat. */
/* 14.09.: Michael hat elf Einzelleistungen genannt. Elf Zeilen
   untereinander lesen sich wie ein Prospekt, nicht wie Premium.
   Deshalb FUENF Felder mit je zwei bis drei Posten. Die
   Bandbreite ist auf einen Blick da, ohne zu erschlagen.
   Drohne ist bewusst KEIN eigener Posten, sondern steht als
   Zusatz unter der Liste: Niemand bucht eine Drohne, man bucht
   einen Film mit Luftaufnahmen. */
.feld{ margin-top:calc(var(--t)*4); }
.feld:first-of-type{ margin-top:calc(var(--t)*2); }
.feld-kopf{
  display:flex; align-items:baseline; gap:calc(var(--t)*2);
  padding-bottom:calc(var(--t)*1.5); margin-bottom:1px;
  border-bottom:2px solid var(--ink);
}
.feld-kopf h3{ font-weight:800; font-stretch:92%; font-size:17px; letter-spacing:-.025em; margin:0; }
.feld-kopf span{ font-size:13px; color:var(--faint); }
.preise{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--kante); border:1px solid var(--kante); border-top:none; }
.preise--zwei{ grid-template-columns:repeat(2,1fr); }
.zusatz{
  margin-top:calc(var(--t)*5); padding-top:calc(var(--t)*3);
  border-top:1px solid var(--kante);
  display:flex; flex-wrap:wrap; gap:calc(var(--t)*1);
}
.zusatz span{
  font-size:13px; color:var(--dim);
  padding:calc(var(--t)*.9) calc(var(--t)*2);
  border:1px solid var(--kante); border-radius:999px;
}
.zusatz b{ color:var(--ink); font-weight:600; }
/* Offener Betrag: als Strich gesetzt, damit sofort auffaellt,
   dass dort noch nichts steht. Keine geschaetzte Zahl. */
.preis-ab.offen{ color:var(--faint); }
.preis{ background:var(--grund); padding:calc(var(--t)*2.5) calc(var(--t)*3); display:flex; flex-direction:column; gap:calc(var(--t)*.8); transition:background .3s ease; }
.preis:hover{ background:var(--flaeche); }
.preis-name{ font-weight:700; font-stretch:95%; font-size:16px; letter-spacing:-.015em; }
.preis-ab{ font-weight:800; font-stretch:88%; font-size:clamp(22px,2vw,28px); letter-spacing:-.03em; line-height:1; }
.preis-ab small{ font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-right:.5em; }
.preis-was{ font-size:13px; line-height:1.45; color:var(--faint); margin:0; }
/* 14.09., Michael: "Bei den Preisen muss das iwie sichtbar sein
   das es nur Ideen sind und individuell projekte anfragbar sind."
   Deshalb ein Hinweiskasten VOR der Liste, nicht als Kleingedrucktes
   darunter. Wer die Zahlen sieht, soll vorher wissen, wie sie
   gemeint sind. */
.preis-hinweis{
  display:flex; gap:calc(var(--t)*2); align-items:flex-start;
  border-left:3px solid var(--gruen);
  background:var(--flaeche);
  padding:calc(var(--t)*2.5) calc(var(--t)*3);
  margin-bottom:calc(var(--t)*4);
  font-size:14px; color:var(--dim); max-width:78ch;
}
.preis-hinweis b{ color:var(--ink); font-weight:600; }
.preis-fuss{ margin-top:calc(var(--t)*3); font-size:12px; color:var(--faint); max-width:80ch; }

.team{ display:grid; grid-template-columns:repeat(4,1fr); gap:calc(var(--t)*3); }
.kopfbild{ margin:0; }
.kopfbild img{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter .45s ease; }
.kopfbild:hover img{ filter:none; }
.kopfbild .leer{ width:100%; aspect-ratio:4/5; background:var(--flaeche); display:grid; place-items:center; font-weight:800; font-size:46px; color:#23252C; }
.kopfbild figcaption{ margin-top:calc(var(--t)*1.5); }
.kopfbild b{ display:block; font-weight:700; font-size:15px; }
.kopfbild i{ font-style:normal; font-size:13px; color:var(--faint); }

.kontakt-raster{ display:grid; grid-template-columns:1.1fr .9fr; gap:calc(var(--t)*9); }
.mailto{ display:inline-block; margin-top:calc(var(--t)*3); font-weight:800; font-stretch:88%;
  font-size:clamp(24px,2.8vw,40px); letter-spacing:-.035em; text-decoration:none;
  border-bottom:2px solid var(--kante); padding-bottom:6px; transition:border-color .3s ease; }
.mailto:hover{ border-color:var(--ink); }
.zeile{ display:flex; justify-content:space-between; align-items:baseline; gap:calc(var(--t)*2);
  padding-block:calc(var(--t)*2); border-top:1px solid var(--kante); text-decoration:none;
  color:var(--dim); font-size:15px; transition:color .25s ease; }
.zeile:last-child{ border-bottom:1px solid var(--kante); }
.zeile:hover{ color:var(--ink); }
.zeile b{ font-weight:600; color:var(--faint); font-size:13px; }

footer{ padding-block:calc(var(--t)*5); }
.fuss{ display:flex; justify-content:space-between; align-items:center; gap:calc(var(--t)*3); font-size:13px; color:var(--faint); }
.fuss a{ text-decoration:none; margin-left:calc(var(--t)*3); }
.fuss a:hover{ color:var(--ink); }

/* ============================================================
   TABLET UND TELEFON
   Die Wand behaelt ihre Unregelmaessigkeit, wird aber grober:
   12 Spalten bei 390 px waeren 32 px je Spalte, das ergaebe
   Briefmarken. Deshalb 6 Spalten und hoehere Zeilen.
   ============================================================ */
@media (max-width:1000px){
  /* Kopfzeile bleibt EINE Zeile: Wortmarke links, Menueknopf
     rechts. Die waagrecht wischbare Linkzeile war abgeschnitten
     ("Tea...") und wirkte wie eine Notloesung. */
  .kopf-innen{ flex-wrap:nowrap; }
  .marke{ display:flex; align-items:center; min-height:44px; }
  .menue{ display:none; }
  .menue-knopf{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; flex:0 0 44px; margin-left:auto;
    background:none; border:none; cursor:pointer; padding:0;
  }
  .menue-knopf i{ display:block; height:2px; background:var(--ink);
    transition:transform .28s ease, opacity .2s ease; }
  .menue-knopf i:nth-child(1){ width:22px; }
  .menue-knopf i:nth-child(2){ width:16px; }
  .menue-knopf i:nth-child(3){ width:22px; }
  .menue-knopf[aria-expanded="true"] i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menue-knopf[aria-expanded="true"] i:nth-child(2){ opacity:0; }
  .menue-knopf[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  body.menue-offen{ overflow:hidden; }

  /* Antippbare Flaechen im Fuss, gemessen waren es 14 px. */
  .fuss a,.zeile,.voll-zeile{ min-height:44px; display:flex; align-items:center; }
  .fuss nav{ display:flex; gap:calc(var(--t)*3); }
  .fuss a{ margin-left:0; }


  .ton-raster,.kontakt-raster{ grid-template-columns:1fr; gap:calc(var(--t)*5); }
  .schritte{ grid-template-columns:repeat(2,1fr); }
  .preise,.preise--zwei{ grid-template-columns:repeat(2,1fr); }
  .team{ grid-template-columns:repeat(2,1fr); }
  .wand--voll{ display:none; }
  .wand--knapp{ display:flex; }
  .wand{ gap:4px; padding-inline:4px; flex-wrap:wrap; }
  .spalte{ gap:4px; flex:1 1 calc(50% - 4px); }
  .band{ margin:4px; }
  .auf-band{ aspect-ratio:16/9; }

  /* Abstaende zusammenziehen. Mit t*15 oben und unten standen
     zwischen zwei Abschnitten 240 px leere Flaeche. */
  .block{ padding-block:calc(var(--t)*8); }
  .ton{ padding-block:calc(var(--t)*4) calc(var(--t)*8); margin-top:calc(var(--t)*3); }
  .schau{ padding-top:calc(var(--t)*8); }
  .schau-kopf{ margin-bottom:calc(var(--t)*4); }
  .block-kopf{ margin-bottom:calc(var(--t)*4); }
  .voll{ padding-block:calc(var(--t)*5); }

  /* Ohne Maus gibt es kein Ueberfahren: Bilder immer in Farbe,
     Bildunterschrift immer sichtbar. */
  .kachel img,.kachel video{ filter:none; }
  .kachel figcaption{ opacity:1; transform:none; font-size:11px; padding:calc(var(--t)*1.2); }

  /* Antippbare Flaechen. Gemessen waren Impressum und Datenschutz
     nur 14 px hoch, das trifft niemand mit dem Daumen. */
  .fuss a,.zeile,.voll-zeile{ min-height:44px; display:flex; align-items:center; }
  .fuss nav{ display:flex; gap:calc(var(--t)*3); }
  .fuss a{ margin-left:0; }

  /* Faecher im Aufmacher waren 12 px, das ist unter der Grenze. */
  /* 14.09., Michael: Kategorien unter der Schlagzeile und die
     Logoleiste sind auf dem Telefon zu praesent. Beide kleiner. */
  /* 14.09.: Acht Kategorien passen bei 390 px nicht in zwei Zeilen,
     egal wie klein die Schrift wird. Gemessen blieben es drei Zeilen
     selbst bei 11 px. Statt weiter zu schrumpfen fallen am Telefon
     die Pillen weg: kein Rahmen, kein Polster, nur eine Textzeile mit
     Trennpunkten. Das nimmt das Gewicht raus, das Michael gestoert
     hat, und bleibt lesbar. */
  .auf-faecher{
    display:block; margin-top:calc(var(--t)*1.5);
    font-size:12px; line-height:1.7; color:var(--dim);
  }
  .auf-faecher span{
    display:inline; border:none; background:none; padding:0;
    font-size:inherit; color:inherit;
  }
  .auf-faecher span:not(:last-child)::after{
    content:" · "; color:var(--faint);
  }
  .etikett{ font-size:12px; }

  /* Logoleiste: Hoehe und Abstaende runter. Auf dem Telefon nimmt
     sie sonst fast einen Viertel Bildschirm ein. */
  .kunden{ padding-block:calc(var(--t)*1.5); }
  .kunde{ height:38px; padding-inline:calc(var(--t)*2.5); }
  .kunde-logo{ transform:scale(.68); transform-origin:center; }
  .kunde--wort{ font-size:14px; }

  /* LumiF1: Zahl und Pfeil nach oben rechts auf Logohoehe,
     Text darunter ueber die ganze Breite. Spart eine Zeile und
     macht den Balken deutlich flacher. */
  .f1-streifen--hell .f1-innen{
    display:grid; gap:calc(var(--t)*1) calc(var(--t)*2);
    grid-template-columns:auto 1fr auto auto;
    grid-template-areas:"zeichen name zahl pfeil" "text text text text";
    align-items:center; padding:calc(var(--t)*2) calc(var(--t)*2.5);
  }
  .f1-streifen--hell .f1-zeichen{ grid-area:zeichen; width:40px; height:40px; flex-basis:40px; }
  .f1-streifen--hell .f1-text{ display:contents; }
  .f1-streifen--hell .f1-text b{ grid-area:name; font-size:16px; }
  .f1-streifen--hell .f1-text span{ grid-area:text; font-size:13px; line-height:1.4; }
  .f1-streifen--hell .f1-zahl{ grid-area:zahl; border:none; padding:0; margin:0; text-align:right; }
  .f1-streifen--hell .f1-zahl b{ font-size:17px; }
  .f1-streifen--hell .f1-zahl span{ font-size:9px; letter-spacing:.12em; }
  .f1-streifen--hell .f1-pfeil{ grid-area:pfeil; font-size:18px; }
  .f1-streifen--hell::before,.f1-streifen--hell::after{ height:12px; flex-basis:12px; background-size:12px 12px; background-position:0 0,6px 6px; }

  /* TEAM: vier Personen untereinander waren viel zu gross.
     Jetzt zwei Spalten, und das Bild sitzt neben dem Namen statt
     darueber. Aus vier Bildschirmen wird ein Block. */
  .team{ grid-template-columns:1fr 1fr; gap:calc(var(--t)*2); }
  .kopfbild img,.kopfbild .leer{ aspect-ratio:1; }
  .kopfbild .leer{ font-size:30px; }
  .kopfbild figcaption{ margin-top:calc(var(--t)*1); }
  .kopfbild b{ font-size:14px; }
  .kopfbild i{ font-size:12px; line-height:1.35; display:block; }
}

@media (max-width:560px){
  .auf-band{ aspect-ratio:4/3; }
  /* .team NICHT auf eine Spalte. Diese Regel hat die neue
     Zwei-Spalten-Anordnung wieder aufgehoben, der Block war
     dadurch weiterhin 1650 px hoch. */
  .schritte,.preise,.preise--zwei{ grid-template-columns:1fr; }
  .auf-text .gross{ max-width:none; }
  .fuss{ flex-direction:column; align-items:flex-start; gap:calc(var(--t)*1.5); }
  .fuss a{ margin-left:0; margin-right:calc(var(--t)*3); }
}