/* =========================================================
   ARFEP Beispielseiten – "leise Galerie"

   Gestaltungsentscheidung in drei Saetzen:
   Dreizehn Entwuerfe in dreizehn Farbwelten stehen hier
   nebeneinander; jede eigene Handschrift der Rahmenseite
   wuerde mit ihnen konkurrieren. Deshalb neutraler Grund,
   eine einzige Sans, kein Raster, keine Textur, und die
   ARFEP-Farbe nur dort, wo sie etwas zu tun hat.
   Die Bilder sind der Inhalt, alles andere ist Beschriftung.

   Schrift: die des Betriebssystems. Kein Webfont, keine
   Lizenzfrage, kein Request - und fuer eine Uebersicht, die
   aus zwoelf Woertern je Kachel besteht, genau richtig.
   ========================================================= */

:root{
  --grund:      #F6F7F8;   /* sehr helles Grau, kein Weiss */
  --flaeche:    #FFFFFF;
  --linie:      #E3E6EA;
  --linie-fein: #EDF0F3;
  --text:       #1B2027;
  --text-weich: #5A6572;
  --gedaempft:  #8B95A1;
  --blau:       #1581FF;
  --blau-tief:  #0F62C4;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas,
          "Liberation Mono", monospace;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}

a{color:var(--blau-tief)}

/* ---------------------------- Kopf ---------------------------- */
.kopf{background:var(--flaeche);border-bottom:1px solid var(--linie)}
.kopf .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-top:13px;padding-bottom:13px;
}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.marke-zeichen{
  width:29px;height:29px;flex:none;border-radius:6px;
  background:var(--text);color:#fff;
  display:grid;place-items:center;
  font:700 16px/1 var(--sans);
}
.marke-text{font-size:15px}
.marke-text b{font-weight:600}
.kopf-kontakt{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap}
/* Die Telefonnummer ist der direkteste Weg zum Gespraech und darum die
   einzige Angabe im Kopf, die Farbe und Fettung bekommt. */
.kopf-tel{font-size:15px;font-weight:600;color:var(--blau-tief);text-decoration:none;white-space:nowrap}
.kopf-tel:hover{text-decoration:underline}
.kopf-mail{font-size:14px;color:var(--text-weich);text-decoration:none;white-space:nowrap}
.kopf-mail:hover{color:var(--blau-tief)}
.kopf-link{font-family:var(--mono);font-size:13px;color:var(--gedaempft);text-decoration:none;white-space:nowrap}
.kopf-link:hover{color:var(--blau-tief)}

/* Unter 620 px reicht die Breite nicht mehr fuer Marke und drei
   Angaben nebeneinander. Dann bricht der Kopf auf zwei Zeilen um:
   Marke oben, Kontakt darunter. Beides bleibt ohne Scrollen sichtbar,
   und der Hero rutscht nur um die eine Zeile nach unten. */
@media (max-width:620px){
  .kopf .wrap{flex-direction:column;align-items:flex-start;gap:9px}
  .kopf-kontakt{width:100%;gap:6px 14px}
}

/* ---------------------------- Hero ----------------------------
   Kurz gehalten: Ueberschrift, ein Satz, ein Knopf. Wer auf eine
   Galerie kommt, will Bilder sehen, keinen Vorspann lesen. */
.hero{padding:clamp(38px,6vw,64px) 0 clamp(26px,4vw,40px)}
.hero h1{
  margin:0;font-weight:600;
  font-size:clamp(27px,4.4vw,42px);line-height:1.15;letter-spacing:-.02em;
  max-width:16em;
}
.hero h1 em{position:relative;font-style:normal;white-space:nowrap}
/* der einzige Schwung auf der Seite - ARFEP-Signatur, einmal */
.schwung{
  position:absolute;left:0;right:0;bottom:-.28em;width:100%;height:.34em;
  color:var(--blau);opacity:.85;
}
.hero p{margin:16px 0 0;font-size:17.5px;color:var(--text-weich);max-width:34em}
.knopf{
  display:inline-block;margin-top:22px;
  background:var(--blau);color:#fff;text-decoration:none;
  font-size:15.5px;font-weight:600;
  padding:12px 24px;border-radius:7px;
  transition:background-color .15s ease;
}
.knopf:hover{background:var(--blau-tief)}

/* ------------------------ Abschnittskopf ---------------------- */
.abschnitt{
  margin:0 0 18px;font-size:13px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gedaempft);
}

/* ------------------------- Kachelraster ------------------------
   Eine Spalte, ab 700 px zwei, ab 1100 px drei. Die dreizehn
   Kacheln passen damit auf etwa zwei Bildschirmhoehen. */
.galerie{padding-bottom:clamp(34px,5vw,54px)}
.kacheln{display:grid;grid-template-columns:1fr;gap:clamp(14px,2vw,22px)}

@media (min-width:700px){
  .kacheln{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1100px){
  .kacheln{grid-template-columns:repeat(3,1fr)}
}

.kachel{
  display:block;text-decoration:none;color:inherit;
  background:var(--flaeche);
  border:1px solid var(--linie);
  border-radius:10px;
  overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kachel:hover{
  border-color:#C3D7F0;
  box-shadow:0 6px 20px rgba(27,32,39,.09);
  transform:translateY(-2px);
}
.kachel:focus-visible{outline:3px solid var(--blau);outline-offset:3px}

/* Bildflaeche. Das Seitenverhaeltnis steht hier UND als width/height
   am <img>; die Flaeche liegt damit fest, bevor das Bild da ist, und
   die Kachel springt beim Nachladen nicht. */
.bild{
  aspect-ratio:16/9;
  background:var(--linie-fein);
  border-bottom:1px solid var(--linie);
  overflow:hidden;
}
.bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}

/* Faellt die Bilddatei aus, tritt diese Flaeche an ihre Stelle -
   kein kaputtes Bildsymbol. */
.bild-leer{display:grid;place-items:center;background:var(--linie-fein)}
.bild-leer span{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gedaempft);
  border:1px dashed var(--linie);border-radius:5px;
  padding:6px 12px;background:var(--flaeche);
}

/* Kacheltext: nur was zum Auswaehlen noetig ist. */
.text{padding:14px 16px 16px}
.adresse{
  display:block;font-family:var(--mono);font-size:11.5px;
  color:var(--gedaempft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.text h3{
  margin:5px 0 0;font-size:17px;font-weight:600;
  line-height:1.3;letter-spacing:-.01em;
}
.merkmale{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.merkmale li{
  font-size:12px;color:var(--text-weich);
  border:1px solid var(--linie);border-radius:99px;padding:3px 10px;
  background:var(--grund);
}

/* Hinweis unter dem Raster */
.hinweis{
  margin:26px 0 0;padding:15px 18px;
  border:1px solid var(--linie);border-radius:8px;
  background:var(--flaeche);
  color:var(--text-weich);font-size:15px;
}
.hinweis b{color:var(--text);font-weight:600}

/* --------------------------- Preis -----------------------------
   Eigener Grund, damit der Block sich absetzt - aber weiss auf
   hellgrau und ohne Rahmenwerk, damit er nicht mit den dreizehn
   Vorschaubildern darueber konkurriert. Der einzige Farbakzent ist
   die Kante am Referenzpreis. */
.preis{
  background:var(--flaeche);
  border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);
  padding:clamp(30px,4.5vw,48px) 0;
}
.preis h2{
  margin:0 0 14px;font-size:clamp(20px,2.6vw,25px);font-weight:600;
  letter-spacing:-.015em;
}
.preis-satz{margin:0;font-size:17px;color:var(--text-weich);max-width:38em}
.preis-satz strong{color:var(--text);font-weight:600}
.preis-referenz{
  margin:18px 0 0;padding:14px 18px;max-width:38em;
  background:var(--grund);
  border-left:3px solid var(--blau);
  border-radius:0 6px 6px 0;
  font-size:16px;color:var(--text-weich);
}
.preis-referenz strong{color:var(--text);font-weight:600}

/* Sekundaerer Knopf: umrandet statt gefuellt. Der gefuellte Knopf im
   Hero bleibt damit der eine Hauptweg, dieser hier ist das Angebot
   fuer alle, die lieber anrufen. */
.knopf-zweit{
  display:inline-block;margin-top:20px;
  background:transparent;color:var(--blau-tief);text-decoration:none;
  font-size:15.5px;font-weight:600;
  padding:11px 22px;border:1.5px solid var(--blau);border-radius:7px;
  transition:background-color .15s ease;
}
.knopf-zweit:hover{background:var(--grund)}
.knopf-zweit:focus-visible{outline:3px solid var(--blau);outline-offset:3px}

/* -------------------------- Ablauf ---------------------------- */
.ablauf{
  padding:clamp(30px,4.5vw,48px) 0 clamp(38px,6vw,60px);
  border-top:1px solid var(--linie);
}
.schritte{
  list-style:none;margin:0;padding:0;counter-reset:schritt;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(16px,3vw,32px);
}
.schritte li{counter-increment:schritt}
.schritte h3{
  margin:0 0 5px;font-size:16px;font-weight:600;letter-spacing:-.01em;
}
.schritte h3::before{
  content:counter(schritt);
  display:inline-grid;place-items:center;
  width:20px;height:20px;margin-right:9px;border-radius:50%;
  background:var(--blau);color:#fff;
  font-size:11.5px;font-weight:700;vertical-align:1px;
}
.schritte p{margin:0;font-size:15px;color:var(--text-weich)}

/* ------------------------ Wer das macht ------------------------
   Bild links, Text rechts. Faellt das Bild weg - und ausgeliefert
   wird es zunaechst mit hidden -, nimmt der Text die volle Breite;
   flex laesst ein display:none-Kind vollstaendig aus dem Layout.
   Deshalb steht hier auch KEINE display-Angabe auf .wer-bild: sie
   wuerde das hidden-Attribut aushebeln. */
.wer{
  border-top:1px solid var(--linie);
  padding:clamp(28px,4vw,44px) 0 clamp(34px,5vw,52px);
}
.wer-innen{display:flex;align-items:flex-start;gap:clamp(18px,3vw,30px)}
.wer-bild{
  flex:none;width:180px;height:180px;
  border-radius:10px;object-fit:cover;
  border:1px solid var(--linie);
}
.wer-bild[hidden]{display:none}
.wer-text{min-width:0}
.wer-text h2{
  margin:0 0 10px;font-size:clamp(20px,2.6vw,25px);font-weight:600;
  letter-spacing:-.015em;
}
.wer-text p{margin:0;font-size:16.5px;color:var(--text-weich);max-width:42em}

@media (max-width:620px){
  .wer-innen{flex-direction:column}
  .wer-bild{width:140px;height:140px}
}

/* ---------------------------- Fuss ---------------------------- */
.fuss{
  border-top:1px solid var(--linie);
  background:var(--flaeche);
  padding:22px 0 26px;
  font-size:14px;color:var(--gedaempft);
}
.fuss p{margin:4px 0}

/* ------------------------- Bewegung --------------------------- */
@media (prefers-reduced-motion:reduce){
  .kachel,.knopf,.knopf-zweit{transition:none}
  .kachel:hover{transform:none}
}