/* =====================================================================
   PFOTENMUT – Erfahrungsberichte und Feinschliff am Umbruch
   =====================================================================
   Die Kacheln öffnen den vollständigen Bericht in einem eigenen
   Fenster. So behält die Seite ihre Höhe, egal wie lang ein Bericht ist.

   Der erste Block gilt für die ganze Startseite, nicht nur für die
   Berichte – er liegt hier, weil seite.css sonst unangetastet bleibt.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Umbruch auf der ganzen Seite
   „balance" verteilt Überschriften gleichmäßig auf die Zeilen,
   „pretty" verhindert einzelne Wörter in der letzten Zeile.
   Ältere Browser ignorieren beides und brechen wie bisher um.
   --------------------------------------------------------------------- */
h1, h2, h3,
.seitenkopf h1{
  text-wrap:balance;
}

.vorspann,
.preise p,
.abschnitt-kopf p,
section > .bahn > p{
  text-wrap:pretty;
}

/* Etwas mehr Laufweite als bisher – bei 52 Zeichen blieb oft ein
   einzelnes Wort in der letzten Zeile stehen. */
.vorspann{max-width:60ch}


/* =====================================================================
   Der Abschnitt
   ===================================================================== */
.berichte{
  background:var(--papier-warm, #EFEBDD);
  border-top:1px solid var(--linie, #DDD6C4);
  padding:clamp(56px, 9vw, 96px) 0;
}

.berichte .vorspann{max-width:60ch}

.berichte-raster{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
  gap:16px;
  margin-top:32px;
  align-items:start;
}


/* =====================================================================
   Die Kachel – ein Knopf, der ein Fenster öffnet
   ===================================================================== */
.bericht{
  display:block;
  width:100%;
  text-align:left;
  font:inherit;
  cursor:pointer;
  background:var(--weiss, #FFFFFF);
  border:1px solid var(--linie, #DDD6C4);
  border-radius:var(--rund, 14px);
  box-shadow:0 1px 2px rgba(35,40,43,.04);
  padding:22px 22px 18px;
  transition:box-shadow .15s, border-color .15s, transform .15s;
}
.bericht:hover{
  border-color:#C9C0A8;
  box-shadow:0 2px 4px rgba(35,40,43,.06), 0 8px 20px rgba(35,40,43,.06);
  transform:translateY(-1px);
}
.bericht:focus-visible{
  outline:2.5px solid var(--oliv, #3F4A2E);
  outline-offset:3px;
}

/* Feste Höhe von zwei Zeilen, damit alle Kacheln gleich groß sind –
   egal wie lang der Kernsatz ist. */
.bericht .kern{
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(2 * 1.5 * 16.5px);
  margin:0 0 16px;
  font-size:16.5px;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--oliv, #3F4A2E);
}

.bericht .wer{
  display:block;
  padding-top:14px;
  border-top:1px solid var(--linie, #DDD6C4);
  font-size:14.5px;
  color:var(--tinte, #23282B);
}
.bericht .wer span{
  display:block;
  font-size:12.5px;
  color:var(--grau-hell, #8C866F);
  margin-top:1px;
}

.bericht .mehr{
  display:inline-block;
  margin-top:12px;
  font-size:13.5px;
  color:var(--oliv, #3F4A2E);
}
.bericht .mehr::after{content:" \2192"}
.bericht:hover .mehr{text-decoration:underline}


/* =====================================================================
   Das Fenster
   ===================================================================== */
.bericht-fenster{
  width:min(620px, calc(100vw - 32px));
  max-height:min(80vh, 760px);
  padding:0;
  border:0;
  border-radius:var(--rund, 14px);
  background:var(--weiss, #FFFFFF);
  color:var(--tinte, #23282B);
  box-shadow:0 20px 60px rgba(35,40,43,.28);
  overflow:hidden;
}
.bericht-fenster:not([open]){display:none}

.bericht-fenster::backdrop{
  background:rgba(35,40,43,.55);
}

/* Kopf mit Name und Schließen */
.fenster-kopf{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:22px 24px 16px;
  border-bottom:1px solid var(--linie, #DDD6C4);
}
.fenster-kopf .wer{
  flex:1;
  margin:0;
  font-size:16px;
  color:var(--tinte, #23282B);
}
.fenster-kopf .wer span{
  display:block;
  font-size:13px;
  color:var(--grau-hell, #8C866F);
  margin-top:2px;
}
.fenster-kopf .zu{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border:0;
  border-radius:9px;
  background:var(--papier, #F4F1E8);
  color:var(--grau, #6E6A5F);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.fenster-kopf .zu:hover{background:#E6E0CE; color:var(--tinte, #23282B)}

/* Der Text – scrollt im Fenster, nicht in der Seite */
.fenster-leib{
  padding:22px 24px 24px;
  overflow-y:auto;
  max-height:calc(80vh - 170px);
}
.fenster-leib .kern{
  margin:0 0 18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--linie, #DDD6C4);
  font-size:17.5px;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--oliv, #3F4A2E);
}
.fenster-leib p{
  margin:0 0 14px;
  font-size:15.5px;
  line-height:1.72;
  color:var(--grau, #6E6A5F);
}
.fenster-leib p:last-child{margin-bottom:0}

.fenster-fuss{
  padding:16px 24px 20px;
  border-top:1px solid var(--linie, #DDD6C4);
  text-align:right;
  background:var(--papier, #F4F1E8);
}

/* Solange ein Fenster offen ist, scrollt die Seite dahinter nicht mit */
body.fenster-offen{overflow:hidden}


/* Auf schmalen Geräten untereinander */
@media (max-width:640px){
  .berichte-raster{grid-template-columns:1fr; gap:13px}
  .bericht{padding:19px 18px 16px}

  .bericht-fenster{
    width:100%;
    max-width:100%;
    max-height:92vh;
    margin:auto auto 0;
    border-radius:var(--rund, 14px) var(--rund, 14px) 0 0;
  }
  .fenster-leib{max-height:calc(92vh - 170px)}
}