/*
Theme Name: jahresreise-akademie
Theme URI: https://jahresreise-akademie.de
Author: Institut Kuhn-Krainick
Author URI: https://institut-kuhn-krainick.de
Description: Block-Theme der Jahresreise Akademie. Entwurf "Klare Kante": weisse Basis, rote Vollflaechen-Baender als Kapitelmarken, Creme und Beige fuer ruhige Abschnitte. Roboto lokal eingebunden, keine externen Dienste, keine Cookies.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.3.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jahresreise-akademie
Tags: block-theme, full-site-editing, one-column, accessibility-ready
*/

/* Farben aus theme.json, mit Rueckfallwerten */
:root{
  --rot:var(--wp--preset--color--rot,#B71918);
  --rot-mittel:var(--wp--preset--color--rot-mittel,#A21A17);
  --rot-dunkel:var(--wp--preset--color--rot-dunkel,#78170E);
  --grau-dunkel:var(--wp--preset--color--grau-dunkel,#404040);
  --grau:var(--wp--preset--color--grau,#666666);
  --grau-mittel:var(--wp--preset--color--grau-mittel,#999999);
  --grau-hell:var(--wp--preset--color--grau-hell,#CCCCCC);
  --beige:var(--wp--preset--color--beige,#E4DBCF);
  --creme:var(--wp--preset--color--creme,#F5EFE6);
  --weiss:var(--wp--preset--color--weiss,#FFFFFF);
}

html{scroll-behavior:smooth;}
img,svg{max-width:100%;height:auto;}

/* ============ Kapitelmarke ============ */
.marke{
  display:inline-block;background:var(--rot);color:#fff;font-weight:900;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;padding:6px 12px;
  margin:0 0 18px;line-height:1.4;
}
.marke-hell{background:var(--creme);color:var(--rot);}
.band .marke-hell{color:var(--rot);}

/* ============ Textgroessen ============ */
p.gross,.gross{font-size:1.13rem;color:var(--grau);max-width:38em;}
/* WordPress zentriert schmalere Bloecke im Layout mit !important. Der Einleitungstext
   soll links stehen, deshalb hier ebenfalls !important. */
.wp-block-group p.gross,.wp-block-group .hinweis{margin-left:0 !important;margin-right:auto !important;}
.klein{font-size:.85rem;color:var(--grau-mittel);}

/* Ueberschriften auf schmalen Bildschirmen eine Stufe kleiner */
@media(max-width:780px){
  h1{font-size:2.3rem;}
  h2{font-size:1.9rem;}
}

/* ============ Kopfbereich ============ */
.kopf{
  position:sticky;top:0;z-index:90;
  background:var(--creme);border-bottom:3px solid var(--rot);
}
.kopf .wp-block-group{align-items:center;}
.kopf .logo img{width:200px;display:block;}
@media(min-width:1120px){ .kopf .logo img{width:190px;} }

/* Kopf zweizeilig: oben Logo und Button, darunter das Menue */
.kopf .kopf-innen{gap:12px;}
.kopf .wp-block-navigation{order:2;}
.kopf .knopf-warte{order:3;}
@media(min-width:1120px){
  .kopf .wp-block-navigation{order:3;flex-basis:100%;padding-top:8px;}
  .kopf .knopf-warte{order:2;}
}

/* Navigation */
.kopf .wp-block-navigation{font-size:.95rem;}
.kopf .wp-block-navigation .wp-block-navigation-item__content{
  color:var(--grau-dunkel);font-weight:500;font-size:.95rem;text-decoration:none;
  border-bottom:2px solid transparent;padding-bottom:3px;
  transition:color .2s ease,border-color .2s ease;
}
.kopf .wp-block-navigation .wp-block-navigation-item__content:hover{
  color:var(--rot);border-bottom-color:var(--rot);
}
.kopf .wp-block-navigation .current-menu-item .wp-block-navigation-item__content{
  color:var(--rot);border-bottom-color:var(--rot);
}
/* Aufklapp-Menue auf schmalen Bildschirmen */
.wp-block-navigation__responsive-container.is-menu-open{background:var(--creme);}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  color:var(--grau-dunkel);font-size:1.1rem;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{color:var(--grau-dunkel);}

/* ============ Buttons ============ */
.wp-block-button__link{
  letter-spacing:.01em;
  transition:background-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.wp-block-button__link:hover{
  transform:translateY(-2px);box-shadow:0 12px 24px rgba(120,23,14,.22);
}
.knopf-klein .wp-block-button__link{padding:11px 20px;font-size:.9rem;}
/* Heller Button auf rotem Grund */
.is-style-hell .wp-block-button__link{background-color:var(--creme);color:var(--rot);}
.is-style-hell .wp-block-button__link:hover{background-color:#fff;color:var(--rot-dunkel);}
/* Button nur mit Linie */
.is-style-linie .wp-block-button__link{
  background-color:transparent;color:var(--rot);box-shadow:inset 0 0 0 2px var(--rot);
}
.is-style-linie .wp-block-button__link:hover{background-color:var(--rot);color:#fff;}

/* ============ Flaechen ============ */
.band{background:var(--rot-dunkel);color:#fff;}
.band h1,.band h2,.band h3{color:#fff;}
.band p,.band .gross,.band li{color:#F7E4E3;}
.band a{color:#fff;}
.band a:hover{color:var(--creme);}
.band .kachel a{color:var(--rot);}
.band .kachel a:hover{color:var(--rot-dunkel);}
.band .wp-block-table td,.band .wp-block-table th{border-color:rgba(255,255,255,.3);}

/* ============ Zweispalter mit stehender Ueberschrift ============ */
@media(min-width:900px){
  .zwei .wp-block-column:first-child{position:sticky;top:118px;}
}

/* ============ Kacheln ============ */
.kacheln{border-top:1px solid var(--grau-hell);}
.kachel{
  padding:26px 24px 28px;background:var(--weiss);
  border-bottom:1px solid var(--grau-hell);border-right:1px solid var(--grau-hell);
  transition:background-color .28s ease,transform .28s ease,box-shadow .28s ease;
}
.kachel:hover{background:var(--creme);transform:translateY(-3px);box-shadow:0 14px 28px rgba(64,64,64,.10);}
.kachel h3{color:var(--grau-dunkel);margin-top:0;}
.kachel p{color:var(--grau);font-size:.97rem;}
.kachel ul{margin:14px 0 0;padding:0;list-style:none;font-size:.94rem;}
.kachel li{border-top:1px solid var(--grau-hell);padding:7px 0;color:var(--grau-dunkel);}
.kachel .nr{display:block;font-weight:900;font-size:2.1rem;color:var(--beige);line-height:1;margin:0 0 12px;}

/* ============ Tabelle ============ */
.wp-block-table table{border-collapse:collapse;width:100%;}
.wp-block-table th,.wp-block-table td{
  text-align:left;vertical-align:top;padding:15px 14px;border-bottom:1px solid var(--grau-hell);
}
.wp-block-table th{
  font-weight:900;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grau);background:var(--creme);
}
.wp-block-table{display:flex;flex-direction:column;}
.wp-block-table figcaption{order:-1;
  text-align:left;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grau);padding:0 0 12px;
}
@media(max-width:699px){
  .wp-block-table table,.wp-block-table tbody,.wp-block-table tr,.wp-block-table td{display:block;width:100%;}
  .wp-block-table thead{display:none;}
  .wp-block-table tr{border-bottom:2px solid var(--grau-hell);padding:10px 0 14px;}
  .wp-block-table td{border:0;padding:3px 0;}
}

/* ============ Listen ============ */
.liste{list-style:none;margin:20px 0 0;padding:0;}
.liste li{padding:14px 0;border-top:1px solid var(--grau-hell);font-size:.97rem;color:var(--grau);}
.liste li strong{color:var(--grau-dunkel);font-weight:900;}
.punkte{margin:16px 0 0;padding:0;list-style:none;}
.punkte li{position:relative;padding:0 0 0 20px;margin:0 0 8px;color:var(--grau);}
.punkte li::before{
  content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--rot);
}

/* ============ Hinweiskasten ============ */
.hinweis{
  padding:20px 24px;background:var(--creme);border-left:6px solid var(--rot);
  font-size:.96rem;color:var(--grau);
}
.hinweis strong{color:var(--grau-dunkel);}
.band .hinweis{background:rgba(255,255,255,.12);border-left-color:#fff;color:#F7E4E3;}
.band .hinweis strong{color:#fff;}

/* ============ Formular ============ */
.formular{background:var(--weiss);padding:28px 26px 30px;border:3px solid var(--grau-hell);}
.formular label{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grau);margin:0 0 7px;font-weight:700;
}
.formular input[type=text],.formular input[type=email]{
  width:100%;padding:14px 15px;border:2px solid var(--grau-hell);background:#fff;
  font-family:inherit;font-size:1rem;color:var(--grau-dunkel);margin:0 0 20px;
  transition:border-color .25s ease;
}
.formular input:focus{outline:none;border-color:var(--rot);}
.formular .ok{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:var(--grau);margin:0 0 22px;}
.formular .ok input{margin-top:5px;}
.formular .ok label{text-transform:none;letter-spacing:0;font-size:.88rem;color:var(--grau);margin:0;font-weight:400;}

/* ============ Fussbereich ============ */
.fuss{background:var(--beige);color:var(--grau);font-size:.92rem;}
.fuss h3{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grau-dunkel);}
.fuss a{color:var(--grau-dunkel);}
.fuss a:hover{color:var(--rot);}
.fuss .logo img{width:220px;}
.fuss-schluss{padding-top:18px;border-top:1px solid rgba(64,64,64,.18);font-size:.85rem;}

/* ============ Animation ============ */
.auf{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.auf.da{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .auf{opacity:1;transform:none;transition:none;}
  .kachel:hover{transform:none;}
  .wp-block-button__link:hover{transform:none;}
  html{scroll-behavior:auto;}
}

/* ============ Blog ============ */
.blog-karten{list-style:none;margin:0;padding:0;}
.blog-karten > li,.blog-karte{
  background:var(--weiss);border:1px solid var(--grau-hell);
  display:flex;flex-direction:column;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.blog-karten > li:hover,.blog-karte:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(64,64,64,.10);border-color:var(--beige);}
.blog-karten > li .wp-block-post-featured-image{margin:0;}
.blog-karten > li .wp-block-post-featured-image img{width:100%;height:190px;object-fit:cover;display:block;}
.blog-karten > li .karte-text{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;}
.blog-karten > li .wp-block-post-title{font-size:1.25rem;line-height:1.2;margin:0;}
.blog-karten > li .wp-block-post-title a{color:var(--grau-dunkel);text-decoration:none;}
.blog-karten > li .wp-block-post-title a:hover{color:var(--rot);}
.blog-karten > li .wp-block-post-excerpt__excerpt{color:var(--grau);font-size:.97rem;margin:0;}
.blog-karten > li .wp-block-post-excerpt__more-link,
.blog-karten > li .wp-block-read-more{
  color:var(--rot);font-weight:700;font-size:.92rem;text-decoration:none;
  border-bottom:2px solid rgba(183,25,24,.3);align-self:flex-start;
}
.blog-karten > li .wp-block-post-excerpt__more-link:hover,
.blog-karten > li .wp-block-read-more:hover{color:var(--rot-dunkel);border-bottom-color:var(--rot-dunkel);}
.blog-karten > li .wp-block-post-date{font-size:.8rem;color:var(--grau-mittel);margin:0;}

/* Einzelner Beitrag */
.beitrag-kopf .wp-block-post-title{margin-top:.2em;}
.beitrag-kopf .wp-block-post-terms{
  display:inline-block;background:var(--rot);color:#fff;font-weight:900;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;padding:6px 12px;margin:0 0 18px;
}
.beitrag-kopf .wp-block-post-terms a{color:#fff;text-decoration:none;}
.beitrag-text p{font-size:1.05rem;}
.beitrag-text h2{font-size:1.7rem;margin-top:1.6em;}
.beitrag-text h3{font-size:1.2rem;margin-top:1.4em;}