/* ==========================================================================
   Jahresreise Akademie - Theme-Gestaltung
   Übertragung von Entwurf 2 "Werkstatt" in Block-Markup.
   Farben und Schriften kommen aus theme.json, hier liegt alles,
   was sich mit Block-Einstellungen allein nicht abbilden lässt.
   ========================================================================== */

:root{
  --jr-rot:#B71918;
  --jr-rot-mittel:#A21A17;
  --jr-rot-dunkel:#78170E;
  --jr-grau-dunkel:#404040;
  --jr-grau:#666666;
  --jr-grau-mittel:#999999;
  --jr-grau-hell:#CCCCCC;
  --jr-beige:#E4DBCF;
  --jr-creme:#F5EFE6;
  --jr-sand:#FAF9F7;
  --jr-linie:#E4DBCF;
}

html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased}

/* --------------------------------------------------------------------------
   1 Kopfbereich
   -------------------------------------------------------------------------- */
.jr-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--jr-linie);
}
.admin-bar .jr-header{top:32px}
@media screen and (max-width:782px){.admin-bar .jr-header{top:46px}}

.jr-header .wp-block-site-logo img{max-height:40px;width:auto}

.jr-marke{line-height:1.15}
.jr-marke b{display:block;font-weight:700;font-size:.98rem;color:var(--jr-grau-dunkel)}
.jr-marke span{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--jr-grau-mittel)}

/* Navigation */
.jr-nav .wp-block-navigation__container{gap:2px}
.jr-nav .wp-block-navigation-item__content{
  font-size:.82rem;font-weight:500;letter-spacing:.02em;
  color:var(--jr-grau);padding:8px 11px;text-transform:uppercase;
  transition:background .2s ease,color .2s ease;
}
.jr-nav .wp-block-navigation-item__content:hover,
.jr-nav .current-menu-item .wp-block-navigation-item__content{
  background:var(--jr-creme);color:var(--jr-grau-dunkel);
}
.jr-nav .wp-block-navigation__submenu-container{
  border:1px solid var(--jr-linie);border-radius:0;
  box-shadow:0 12px 30px rgba(64,64,64,.1);padding:4px 0;
}
.jr-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  text-transform:none;font-size:.86rem;padding:9px 16px;
}

/* Kopf-Buttons kleiner */
.jr-kopf-cta .wp-block-button__link{padding:8px 13px;font-size:.74rem;border-width:1px}
.jr-kopf-cta .is-style-outline .wp-block-button__link{
  background:transparent;color:var(--jr-rot);border-color:var(--jr-rot);
}
.jr-kopf-cta .is-style-outline .wp-block-button__link:hover{background:var(--jr-rot);color:#fff}
@media(max-width:1079px){.jr-kopf-cta{display:none}}

/* --------------------------------------------------------------------------
   2 Abschnittsraster mit mitlaufender Labelspalte
   -------------------------------------------------------------------------- */
.jr-abschnitt{padding-top:clamp(3.8rem,7vw,5.5rem);padding-bottom:clamp(3.8rem,7vw,5.5rem);border-bottom:1px solid var(--jr-linie)}
.jr-abschnitt.jr-sand{background:var(--jr-sand)}
.jr-abschnitt.jr-warm{background:var(--jr-creme)}
.jr-abschnitt.jr-ohne-linie{border-bottom:0}

.jr-spalten{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:940px){
  .jr-spalten{grid-template-columns:230px 1fr;gap:56px;align-items:start}
}
.jr-spalten>*{min-width:0}

.jr-labelspalte{position:relative}
@media(min-width:940px){.jr-labelspalte{position:sticky;top:104px}}
.admin-bar .jr-labelspalte{top:136px}

.jr-label-nr{display:block;font-size:.7rem;font-weight:500;letter-spacing:.14em;color:var(--jr-grau-mittel);font-variant-numeric:tabular-nums;margin:0}
.jr-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--jr-rot);margin:6px 0 10px}
.jr-labelspalte p:not(.jr-label):not(.jr-label-nr){font-size:.88rem;color:var(--jr-grau);margin:0}

.jr-text-mass{max-width:66ch}

/* --------------------------------------------------------------------------
   3 Raster mit sichtbaren Linien
   -------------------------------------------------------------------------- */
.jr-raster{display:grid;grid-template-columns:1fr;border:1px solid var(--jr-linie);gap:0}
@media(min-width:620px){.jr-raster{grid-template-columns:1fr 1fr}}
.jr-raster>*{
  padding:24px 22px;border-bottom:1px solid var(--jr-linie);margin:0;
  transition:transform .28s ease,box-shadow .28s ease,background .28s ease;
}
@media(min-width:620px){
  .jr-raster>*{border-right:1px solid var(--jr-linie)}
  .jr-raster>*:nth-child(2n){border-right:0}
  .jr-raster>*:nth-last-child(-n+2){border-bottom:0}
}
.jr-raster>*:last-child{border-bottom:0}
.jr-raster>*:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(64,64,64,.1);background:#fff;position:relative;z-index:2}
.jr-warm .jr-raster>*{background:#fff}

.jr-raster-3{grid-template-columns:1fr}
@media(min-width:820px){
  .jr-raster-3{grid-template-columns:repeat(3,1fr)}
  .jr-raster-3>*{border-right:1px solid var(--jr-linie);border-bottom:0}
  .jr-raster-3>*:nth-child(2n){border-right:1px solid var(--jr-linie)}
  .jr-raster-3>*:last-child{border-right:0}
}

.jr-karte-nr{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;color:var(--jr-rot);margin-bottom:9px;font-variant-numeric:tabular-nums}
.jr-raster h3{font-size:1.02rem;margin:0 0 7px}
.jr-raster p{font-size:.92rem;color:var(--jr-grau);margin:0}

/* --------------------------------------------------------------------------
   4 Kennzahlenzeile
   -------------------------------------------------------------------------- */
.jr-kennzahlen{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--jr-linie);gap:0}
@media(min-width:720px){.jr-kennzahlen{grid-template-columns:repeat(5,1fr)}}
.jr-kennzahlen>*{padding:18px 14px;border-right:1px solid var(--jr-linie);border-bottom:1px solid var(--jr-linie);margin:0}
.jr-kennzahlen>*:nth-child(2n){border-right:0}
@media(min-width:720px){
  .jr-kennzahlen>*{border-bottom:0;border-right:1px solid var(--jr-linie)}
  .jr-kennzahlen>*:last-child{border-right:0}
}
.jr-kennzahlen .jr-kz-titel{font-size:.64rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--jr-grau-mittel);margin:0 0 5px}
.jr-kennzahlen .jr-kz-wert{font-size:1.02rem;font-weight:700;margin:0;font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   5 Dimensionen mit Schlagworten
   -------------------------------------------------------------------------- */
.jr-chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.jr-chips li{
  font-size:.78rem;font-weight:500;padding:4px 10px;
  background:var(--jr-creme);border:1px solid var(--jr-linie);color:var(--jr-grau-dunkel);
  transition:background .2s ease,border-color .2s ease;
}
.jr-raster>*:hover .jr-chips li{background:var(--jr-beige);border-color:var(--jr-grau-hell)}
.jr-warm .jr-chips li{background:var(--jr-creme)}

/* --------------------------------------------------------------------------
   6 Rad-Diagramm
   -------------------------------------------------------------------------- */
.jr-rad{width:100%;max-width:400px;margin:0 auto;height:auto;display:block}
.jr-rad .jr-seg{transition:opacity .3s ease}
.jr-rad:hover .jr-seg{opacity:.45}
.jr-rad .jr-seg:hover{opacity:1}

/* --------------------------------------------------------------------------
   7 Bild über die volle Breite, bricht aus dem Raster
   -------------------------------------------------------------------------- */
.jr-vollbild{
  background:var(--jr-beige);
  border-top:1px solid var(--jr-linie);border-bottom:1px solid var(--jr-linie);
  min-height:300px;
}
@media(min-width:900px){.jr-vollbild{min-height:440px}}
.jr-vollbild img{width:100%;height:100%;object-fit:cover;display:block}
/* leerer Bildbereich, solange noch kein Foto eingesetzt ist */
.jr-vollbild:not(:has(img)){display:flex;align-items:center;justify-content:center;text-align:center;padding:30px}

/* Bildbereiche im Raster */
.jr-bild{background:var(--jr-creme);border:1px solid var(--jr-grau-hell);overflow:hidden}
.jr-bild img{width:100%;height:100%;object-fit:cover;display:block}

.jr-bildreihe{display:grid;grid-template-columns:1fr;gap:1px;background:var(--jr-linie);border:1px solid var(--jr-linie)}
@media(min-width:720px){.jr-bildreihe{grid-template-columns:repeat(3,1fr)}}
.jr-bildreihe>*{margin:0;min-width:0;aspect-ratio:4/3;background:var(--jr-creme)}
.jr-bildreihe img{width:100%;height:100%;object-fit:cover}

/* --------------------------------------------------------------------------
   8 Stimmen
   -------------------------------------------------------------------------- */
.jr-stimmen{display:grid;grid-template-columns:1fr;border:1px solid var(--jr-linie);background:#fff;gap:0}
@media(min-width:860px){.jr-stimmen{grid-template-columns:repeat(3,1fr)}}
.jr-stimmen>*{
  padding:28px 24px;border-bottom:1px solid var(--jr-linie);margin:0;
  display:flex;flex-direction:column;transition:background .25s ease;
}
@media(min-width:860px){
  .jr-stimmen>*{border-bottom:0;border-right:1px solid var(--jr-linie)}
  .jr-stimmen>*:last-child{border-right:0}
}
.jr-stimmen>*:last-child{border-bottom:0}
.jr-stimmen>*:hover{background:var(--jr-sand)}

.jr-zitat{position:relative;font-size:1.02rem;line-height:1.6;color:var(--jr-grau-dunkel);margin:0 0 20px;flex:1;padding-top:36px}
.jr-zitat::before{content:"\201E";position:absolute;top:2px;left:0;font-size:2.7rem;font-weight:700;color:var(--jr-rot);line-height:1}
.jr-person{display:flex;align-items:center;gap:13px;padding-top:17px;border-top:1px solid var(--jr-linie)}
.jr-person .wp-block-image,.jr-person figure{margin:0;flex:0 0 auto;width:52px;height:52px}
.jr-person img{width:52px;height:52px;object-fit:cover;background:var(--jr-beige);border:1px solid var(--jr-grau-hell)}
.jr-person-name{display:block;font-size:.93rem;font-weight:700;color:var(--jr-grau-dunkel);margin:0}
.jr-person-rolle{display:block;font-size:.82rem;color:var(--jr-grau);margin:0}

/* --------------------------------------------------------------------------
   9 Kasten mit roter Kante, Siegel, Warteliste
   -------------------------------------------------------------------------- */
.jr-kasten{border:1px solid var(--jr-linie);border-left:5px solid var(--jr-rot);background:#fff;padding:30px 26px}
@media(min-width:820px){.jr-kasten{padding:40px 38px}}

.jr-siegel{border:1px solid var(--jr-rot);background:var(--jr-creme);padding:24px 22px}

.jr-warteliste{background:var(--jr-grau-dunkel);color:var(--jr-beige);padding:32px 26px}
@media(min-width:820px){.jr-warteliste{padding:42px 38px}}
.jr-warteliste h2,.jr-warteliste h3{color:#fff}
.jr-warteliste p{color:var(--jr-grau-hell)}
.jr-warteliste .wp-block-button__link{border-color:#fff}
.jr-warteliste .wp-block-button__link:hover{background:#fff;color:var(--jr-rot);border-color:#fff}
/* Warteliste: Spaltenbreiten kommen aus den Blockeinstellungen, hier nur Umbruch und Abstand */
.jr-warteliste .wp-block-columns{flex-wrap:wrap;gap:24px}
.jr-warteliste .wp-block-column{min-width:0}
.jr-warteliste .wp-block-buttons{justify-content:flex-start}
@media(max-width:781px){.jr-warteliste .wp-block-column{flex-basis:100% !important}}

/* Strichliste */
.jr-striche{list-style:none;margin:20px 0;padding:0;display:grid;gap:9px}
.jr-striche li{display:flex;gap:10px;font-size:.92rem;color:var(--jr-grau)}
.jr-striche li::before{content:"";width:9px;height:1px;background:var(--jr-rot);flex:0 0 auto;margin-top:12px}

/* Takttabelle */
.jr-takt{width:100%;border-collapse:collapse;font-size:.93rem}
.jr-takt th{text-align:left;font-size:.64rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--jr-grau-mittel);padding:0 14px 9px 0;border-bottom:1px solid var(--jr-linie)}
.jr-takt td{padding:13px 14px 13px 0;border-bottom:1px solid var(--jr-linie);vertical-align:top}
.jr-takt td:first-child{width:52px;font-weight:700;color:var(--jr-rot);font-variant-numeric:tabular-nums;font-size:.8rem}
.jr-takt tr:hover td{background:var(--jr-sand)}

/* --------------------------------------------------------------------------
   10 Fußbereich
   -------------------------------------------------------------------------- */
.jr-footer{background:var(--jr-grau-dunkel);color:var(--jr-beige);font-size:.88rem;padding-top:52px;padding-bottom:26px}
.jr-footer a{color:var(--jr-beige)}
.jr-footer a:hover{color:#fff}
.jr-footer h2,.jr-footer h3,.jr-footer h4{color:#fff}
.jr-footer-titel{font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;color:var(--jr-grau-mittel);margin:0 0 12px;font-weight:700}
.jr-footer .wp-block-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.jr-footnote{margin-top:38px;padding-top:18px;border-top:1px solid var(--jr-grau);font-size:.78rem;color:var(--jr-grau-mittel)}

/* --------------------------------------------------------------------------
   11 Feste Leiste auf dem Handy
   -------------------------------------------------------------------------- */
.jr-mobil-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:70;display:flex;
  background:#fff;border-top:1px solid var(--jr-grau-hell);
}
.jr-mobil-cta .wp-block-button{flex:1;margin:0}
.jr-mobil-cta .wp-block-button__link{
  display:block;width:100%;text-align:center;border:0;border-radius:0;
  padding:14px 8px;font-size:.76rem;
}
.jr-mobil-cta .is-style-outline .wp-block-button__link{
  background:#fff;color:var(--jr-rot);border-left:1px solid var(--jr-grau-hell);
}
@media(min-width:1080px){.jr-mobil-cta{display:none}}
@media(max-width:1079px){body{padding-bottom:62px}}

/* --------------------------------------------------------------------------
   12 Dezente Animation beim Scrollen
   -------------------------------------------------------------------------- */
.jr-auf{opacity:0;transition:opacity .6s ease}
.jr-auf.jr-da{opacity:1}
/* im Editor nie ausblenden */
.block-editor-block-list__layout .jr-auf{opacity:1}

@media(prefers-reduced-motion:reduce){
  .jr-auf{opacity:1;transition:none}
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* --------------------------------------------------------------------------
   13 Kleinkram
   -------------------------------------------------------------------------- */
.jr-claim{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--jr-rot);margin:0 0 16px}
.jr-hinweis{font-size:.8rem;color:var(--jr-grau-mittel);margin:16px 0 0}
.jr-hero{padding-top:44px;padding-bottom:56px;border-bottom:1px solid var(--jr-linie)}
@media(min-width:900px){.jr-hero{padding-top:64px;padding-bottom:76px}}
.jr-hero h1{margin-bottom:18px}

.jr-person-zeile{display:flex;align-items:center;gap:13px;margin-top:26px;padding-top:20px;border-top:1px solid var(--jr-linie)}
.jr-person-zeile .wp-block-image,.jr-person-zeile figure{margin:0;flex:0 0 auto}
.jr-person-zeile img{width:54px;height:54px;object-fit:cover;background:var(--jr-beige);border:1px solid var(--jr-grau-hell)}

/* Barrierefreiheit: Sprungmarke */
.jr-skip{position:absolute;left:-9999px;top:0;background:var(--jr-rot);color:#fff;padding:12px 18px;z-index:100}
.jr-skip:focus{left:0}

/* Fokus sichtbar halten */
a:focus-visible,button:focus-visible,.wp-block-button__link:focus-visible,input:focus-visible{
  outline:2px solid var(--jr-rot);outline-offset:2px;
}