/*
Theme Name: ThamnophisWorld
Description: Das Erscheinungsbild von thamnophisworld.com. Die Regeln kommen
  aus Jimdo_Widgets/_tools/bausteine.py und werden von WordPress/_tools/
  theme_bauen.py hierher uebertragen -- diese Datei NICHT von Hand aendern,
  sie wird bei jedem Lauf ueberschrieben.
Author: Christian Lessmeier
Version: 1.0
*/
/* ---------- Farben hell (Standard) ---------- */
#tw-seite{
  --tw-bg:        #ffffff;
  --tw-bg-alt:    #e9f6fb;
  --tw-surface:   #ffffff;
  --tw-text:      #1f2d3a;
  --tw-muted:     #5a6c7d;
  --tw-accent:    #007099;
  --tw-accent-2:  #005270;
  --tw-logo:      #00b0f0;
  --tw-on-accent: #ffffff;
  --tw-border:    #cfe6f0;
  --tw-shadow:    0 2px 14px rgba(20,40,60,.09);
  --tw-shadow-lg: 0 14px 34px rgba(20,40,60,.16);
  --tw-radius:    14px;
  --tw-maxw:      1180px;
  --tw-lese:      760px;
  --tw-font-h:    'Playfair Display', Georgia, 'Times New Roman', serif;
  --tw-font-b:    'Source Sans 3', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Farben dunkel (automatisch) ---------- */
@media (prefers-color-scheme: dark){
  #tw-seite:not([data-tw-theme="light"]){
    --tw-bg:        #101820;
    --tw-bg-alt:    #16202a;
    --tw-surface:   #1a2530;
    --tw-text:      #e7eef4;
    --tw-muted:     #a6b7c4;
    --tw-accent:    #00b0f0;
    --tw-accent-2:  #5cc9f5;
    --tw-logo:      #00b0f0;
    --tw-on-accent: #06121b;
    --tw-border:    #2a3a45;
    --tw-shadow:    0 2px 14px rgba(0,0,0,.45);
    --tw-shadow-lg: 0 14px 34px rgba(0,0,0,.60);
  }
}
/* manueller Schalter (nur fuer die lokale Vorschau noetig) */
#tw-seite[data-tw-theme="dark"]{
  --tw-bg:#101820; --tw-bg-alt:#16202a; --tw-surface:#1a2530;
  --tw-text:#e7eef4; --tw-muted:#a6b7c4;
  --tw-accent:#00b0f0; --tw-accent-2:#5cc9f5; --tw-logo:#00b0f0;
  --tw-on-accent:#06121b;
  --tw-border:#2a3a45;
  --tw-shadow:0 2px 14px rgba(0,0,0,.45);
  --tw-shadow-lg:0 14px 34px rgba(0,0,0,.60);
}

/* ---------- Reset, damit das Jimdo-Design nicht reinfunkt ---------- */
#tw-seite, #tw-seite *, #tw-seite *::before, #tw-seite *::after{ box-sizing:border-box; }
#tw-seite{
  margin:0; padding:0; width:100%;
  font-family:var(--tw-font-b);
  font-size:17px; line-height:1.7;
  color:var(--tw-text);
  background:var(--tw-bg);
  text-align:left;
  -webkit-font-smoothing:antialiased;
}
#tw-seite h1, #tw-seite h2, #tw-seite h3, #tw-seite h4, #tw-seite p,
#tw-seite ul, #tw-seite ol, #tw-seite li, #tw-seite figure, #tw-seite figcaption{
  margin:0; padding:0; font-weight:inherit;
}
#tw-seite img{ max-width:100%; height:auto; display:block; border:0; }
#tw-seite a{ text-decoration:none; color:inherit; }
#tw-seite-anchor{ width:100%; }

/* ---------- Kopfbild ---------- */
#tw-seite .tw-hero{
  position:relative; isolation:isolate;
  min-height:clamp(260px, 42vh, 460px);
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:linear-gradient(135deg,#22384a,#2f7396 55%,#16394f);
}
#tw-seite .tw-hero.tw-hero-schlank{ min-height:clamp(200px, 30vh, 320px); }
#tw-seite .tw-hero-img{ position:absolute; inset:0; z-index:0; }
#tw-seite .tw-hero-img img{
  width:100%; height:100%; object-fit:cover; object-position:center 45%;
  opacity:.85;
}
#tw-seite .tw-hero-veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(9,20,29,.92) 0%, rgba(9,20,29,.55) 42%, rgba(9,20,29,.10) 78%, rgba(9,20,29,0) 100%),
    linear-gradient(to right, rgba(9,20,29,.55) 0%, rgba(9,20,29,0) 62%);
}
#tw-seite .tw-hero-inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--tw-maxw); margin:0 auto;
  padding:clamp(1.75rem,4vw,3.25rem) clamp(1.25rem,4vw,2rem);
}
#tw-seite .tw-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.76rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:#d6e8f3; margin-bottom:.7rem;
}
#tw-seite .tw-eyebrow::before{
  content:""; width:30px; height:2px;
  background:var(--tw-logo,#00b0f0); border-radius:2px;
}
#tw-seite .tw-hero h1{
  font-family:var(--tw-font-h); font-weight:700;
  font-size:clamp(1.65rem, 4.2vw, 2.9rem);
  line-height:1.14; color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
#tw-seite .tw-hero .tw-latein{
  font-family:var(--tw-font-h); font-style:italic; font-weight:400;
  font-size:clamp(1rem, 2vw, 1.3rem);
  color:rgba(255,255,255,.88);
  margin-top:.35rem;
}

/* ---------- Inhaltsbereich ---------- */
#tw-seite .tw-body{
  background:var(--tw-bg);
  padding:clamp(2.25rem,5vw,3.75rem) clamp(1.25rem,4vw,2rem);
}
#tw-seite .tw-inner{ max-width:var(--tw-maxw); margin:0 auto; }
#tw-seite .tw-lese{ max-width:var(--tw-lese); margin:0 auto; }

/* Fliesstext */
#tw-seite .tw-prosa p{ margin-bottom:1.15rem; line-height:1.85; }
#tw-seite .tw-prosa p:last-child{ margin-bottom:0; }
#tw-seite .tw-prosa ul, #tw-seite .tw-prosa ol{ margin:0 0 1.15rem 1.35rem; }
#tw-seite .tw-prosa li{ list-style:disc; margin-bottom:.4rem; }
#tw-seite .tw-prosa ol li{ list-style:decimal; }
#tw-seite .tw-prosa strong, #tw-seite .tw-prosa b{ font-weight:600; color:var(--tw-text); }
#tw-seite .tw-prosa a{ color:var(--tw-accent); text-decoration:underline; }
#tw-seite .tw-prosa a:hover{ color:var(--tw-accent-2); }

#tw-seite h2.tw-h{
  font-family:var(--tw-font-h); font-weight:600;
  font-size:clamp(1.35rem,2.6vw,1.8rem);
  color:var(--tw-text);
  margin:2.25rem 0 .9rem;
}
#tw-seite h3.tw-h{
  font-family:var(--tw-font-h); font-weight:600;
  font-size:clamp(1.15rem,2.1vw,1.4rem);
  color:var(--tw-text);
  margin:1.75rem 0 .7rem;
}
#tw-seite .tw-h:first-child{ margin-top:0; }
#tw-seite .tw-trenner{
  border:0; height:1px; background:var(--tw-border);
  margin:2rem 0;
}

/* ---------- Bildergalerie ---------- */
#tw-seite .tw-galerie{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:clamp(.75rem,1.6vw,1.15rem);
  margin:1.75rem 0;
}
#tw-seite .tw-galerie button{
  display:block; padding:0; border:1px solid var(--tw-border);
  background:var(--tw-bg-alt);
  border-radius:10px; overflow:hidden; cursor:zoom-in;
  aspect-ratio:4/3;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
#tw-seite .tw-galerie button:hover, #tw-seite .tw-galerie button:focus-visible{
  transform:translateY(-3px);
  box-shadow:var(--tw-shadow-lg);
  border-color:var(--tw-accent);
}
#tw-seite .tw-galerie img{ width:100%; height:100%; object-fit:cover; }

/* Einzelbild */
#tw-seite .tw-bild{ margin:1.5rem 0; }
#tw-seite .tw-bild img{
  width:100%; border-radius:var(--tw-radius);
  border:1px solid var(--tw-border);
}

/* ---------- Kacheln (Uebersichtsseiten) ---------- */
#tw-seite .tw-kacheln{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:clamp(1rem,2vw,1.6rem);
  margin-top:2rem;
}
#tw-seite .tw-kachel{
  display:flex; flex-direction:column;
  background:var(--tw-surface);
  border:1px solid var(--tw-border);
  border-radius:var(--tw-radius);
  overflow:hidden; box-shadow:var(--tw-shadow);
  cursor:pointer;   /* ganze Kachel klickbar (Skript hinter der Liste) */
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
#tw-seite .tw-kachel:hover, #tw-seite .tw-kachel:focus-within{
  transform:translateY(-5px);
  box-shadow:var(--tw-shadow-lg);
  border-color:var(--tw-accent);
}
#tw-seite .tw-kachel-bild{ aspect-ratio:16/10; overflow:hidden; background:var(--tw-bg-alt); position:relative; }
#tw-seite .tw-kachel-bild a{ display:block; width:100%; height:100%; }
#tw-seite .tw-kachel-bild img{ width:100%; height:100%; object-fit:cover; transition:transform .45s; }
#tw-seite .tw-kachel:hover .tw-kachel-bild img{ transform:scale(1.06); }
#tw-seite .tw-kachel-leer{
  display:flex; align-items:center; justify-content:center;
  height:100%; color:var(--tw-muted); font-size:.85rem; font-style:italic;
  background:linear-gradient(135deg, var(--tw-bg-alt), var(--tw-surface));
}
#tw-seite .tw-kachel-text{ padding:1.15rem 1.25rem 1.35rem; display:flex; flex-direction:column; flex:1; }
#tw-seite .tw-kachel-text h3{
  font-family:var(--tw-font-h); font-weight:600; font-size:1.12rem;
  color:var(--tw-text); margin-bottom:.2rem;
}
#tw-seite .tw-kachel-text .tw-latein{
  font-family:var(--tw-font-h); font-style:italic;
  font-size:.95rem; color:var(--tw-muted); margin-bottom:.6rem;
}
#tw-seite .tw-kachel-text p{ color:var(--tw-muted); font-size:.94rem; line-height:1.6; }
#tw-seite .tw-kachel .tw-mehr{
  margin-top:auto; padding-top:.9rem;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.93rem; font-weight:600; color:var(--tw-accent);
}
#tw-seite .tw-kachel .tw-mehr::after{ content:"\203A"; font-size:1.3em; line-height:1; }
#tw-seite .tw-kachel:hover .tw-mehr{ gap:.7rem; color:var(--tw-accent-2); }

/* ---------- Steckbrief-Karten (Nachzuchten) ---------- */
/* Die Obergrenze von 380px und justify-content sorgen dafuer, dass wenige
   Karten mittig unter der Ueberschrift stehen statt linksbuendig am Rand
   zu kleben. Ohne beides fuellen zwei Karten nur die ersten zwei von vier
   moeglichen Spalten. */
#tw-seite .tw-karten{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px, 380px));
  justify-content:center;
  gap:clamp(1rem,2vw,1.75rem);
  margin-top:1.75rem;
}
#tw-seite .tw-karte{
  background:var(--tw-surface);
  border:1px solid var(--tw-border);
  border-radius:var(--tw-radius);
  overflow:hidden; box-shadow:var(--tw-shadow);
  display:flex; flex-direction:column;
}
#tw-seite .tw-karte-bild{ aspect-ratio:4/3; overflow:hidden; background:var(--tw-bg-alt); }
#tw-seite .tw-karte-bild img{ width:100%; height:100%; object-fit:cover; }
#tw-seite .tw-karte-text{ padding:1.15rem 1.25rem 1.35rem; }
#tw-seite .tw-karte-text p{ color:var(--tw-muted); font-size:.95rem; line-height:1.65; margin-bottom:.25rem; }
#tw-seite .tw-karte-text p:first-child{
  font-family:var(--tw-font-h); font-style:italic;
  font-size:1.08rem; color:var(--tw-text); margin-bottom:.5rem;
}

/* ---------- Platzhalter fuer das native Jimdo-Galerie-Element ----------
   Nur in der lokalen Vorschau sichtbar: der ganze Abschnitt wird beim Einbau
   in Jimdo geloescht und durch das Element "Bilder-Galerie" ersetzt. */
#tw-seite .tw-platzhalter{
  border:2px dashed var(--tw-accent);
  border-radius:var(--tw-radius);
  padding:clamp(1rem,2.5vw,1.6rem);
  margin:1.5rem 0;
  background:var(--tw-bg-alt);
}
#tw-seite .tw-platzhalter-kopf{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem 1rem;
  margin-bottom:1.1rem;
  padding-bottom:.8rem;
  border-bottom:1px solid var(--tw-border);
}
#tw-seite .tw-platzhalter-kopf b{
  font-size:.82rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--tw-accent);
}
#tw-seite .tw-platzhalter-kopf span{
  font-size:.88rem; color:var(--tw-muted); flex:1 1 16rem;
}
#tw-seite .tw-platzhalter .tw-galerie{ margin:0; }

/* ---------- Hinweiskasten ---------- */
#tw-seite .tw-hinweis{
  border:1px dashed var(--tw-accent);
  border-radius:var(--tw-radius);
  background:var(--tw-bg-alt);
  padding:1.25rem 1.4rem;
  color:var(--tw-muted);
  font-size:.95rem;
  margin:1.5rem 0;
}
#tw-seite .tw-hinweis b{ color:var(--tw-text); }

/* ---------- Schaltflaeche ---------- */
#tw-seite .tw-btn{
  display:inline-block;
  padding:.7rem 1.6rem; border-radius:999px;
  font-size:.95rem; font-weight:600;
  background:var(--tw-accent); color:var(--tw-on-accent);
  border:2px solid var(--tw-accent);
  transition:background .2s, border-color .2s, transform .2s;
}
#tw-seite .tw-btn:hover{ background:var(--tw-accent-2); border-color:var(--tw-accent-2); transform:translateY(-2px); }

/* ---------- Lightbox ---------- */
#tw-seite .tw-lightbox{
  position:fixed; inset:0; z-index:99999;
  background:rgba(4,10,15,.94);
  display:none; align-items:center; justify-content:center;
  padding:2.5rem 1rem;
}
#tw-seite .tw-lightbox.auf{ display:flex; }
#tw-seite .tw-lightbox img{
  max-width:min(1400px, 94vw); max-height:88vh;
  width:auto; height:auto;
  border-radius:8px; box-shadow:0 10px 60px rgba(0,0,0,.6);
}
#tw-seite .tw-lb-schliessen, #tw-seite .tw-lb-vor, #tw-seite .tw-lb-zurueck{
  position:absolute; background:rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.3); border-radius:50%;
  width:48px; height:48px; font-size:1.5rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
#tw-seite .tw-lb-schliessen:hover, #tw-seite .tw-lb-vor:hover, #tw-seite .tw-lb-zurueck:hover{ background:rgba(255,255,255,.28); }
#tw-seite .tw-lb-schliessen{ top:1rem; right:1rem; }
#tw-seite .tw-lb-zurueck{ left:1rem; top:50%; transform:translateY(-50%); }
#tw-seite .tw-lb-vor{ right:1rem; top:50%; transform:translateY(-50%); }
#tw-seite .tw-lb-zaehler{
  position:absolute; bottom:1.1rem; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.75); font-size:.85rem; letter-spacing:.08em;
}

#tw-seite a:focus-visible, #tw-seite button:focus-visible{
  outline:3px solid var(--tw-accent); outline-offset:3px;
}

/* ---------- Handy ---------- */
@media (max-width:640px){
  #tw-seite{ font-size:16px; }
  #tw-seite .tw-galerie{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
  /* schmaler Rahmen, damit die Galerie darin zweispaltig bleibt */
  #tw-seite .tw-platzhalter{ padding:.75rem .6rem; }
  #tw-seite .tw-lb-zurueck{ left:.35rem; }
  #tw-seite .tw-lb-vor{ right:.35rem; }
}
@media (prefers-reduced-motion:reduce){
  #tw-seite *{ transition:none !important; animation:none !important; }
}


/* =====================================================================
   Ergaenzungen fuer WordPress
   Alles oberhalb kommt unveraendert aus den Bausteinen. Hier steht nur,
   was Jimdo nicht brauchte: Kopf- und Fussbereich des Themes und die
   Bausteine, die Frank im Editor einsetzt (Absatz, Bild, Galerie).
   ===================================================================== */

html, body { margin:0; padding:0; }
body{
  background: var(--tw-bg, #fff);
  color: var(--tw-text, #1f2d3a);
  font-family: var(--tw-font-b, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
}

/* ---------- Kopfbereich ---------- */
.tw-kopf{
  background:#717171;                     /* wie bisher im Jimdo-Kopf */
  padding:18px 20px;
}
.tw-kopf-innen{
  max-width:var(--tw-maxw,1180px); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.tw-kopf img{ display:block; max-width:260px; height:auto; }
/* Das Menue soll in eine Zeile passen -- sieben Eintraege bei 1400px Breite.
   Deshalb knapper Abstand und kein Umbruch, solange Platz ist. */
.tw-menue ul{ list-style:none; display:flex; flex-wrap:wrap; gap:4px 15px;
              margin:0; padding:0; justify-content:flex-end; }
.tw-menue a{ color:#fff; text-decoration:none; font-size:.98rem; padding:6px 2px;
             display:inline-block; white-space:nowrap; }
.tw-menue a:hover, .tw-menue .current-menu-item > a{ text-decoration:underline; }

/* Menueknopf fuers Handy */
.tw-menue-knopf{
  display:none; background:none; border:0; cursor:pointer; padding:8px;
}
.tw-menue-knopf span{ display:block; width:26px; height:3px; background:#fff; margin:5px 0; }
@media (max-width:820px){
  .tw-menue-knopf{ display:block; }
  .tw-menue{ display:none; width:100%; }
  .tw-menue.offen{ display:block; }
  .tw-menue ul{ flex-direction:column; gap:0; }
  .tw-menue li{ border-top:1px solid rgba(255,255,255,.25); }
  .tw-menue a{ padding:11px 2px; }
  .tw-kopf-innen{ flex-wrap:wrap; }
}

/* ---------- Fussbereich ---------- */
.tw-fuss{
  background:#11212c; color:#c9d6de; margin-top:60px; padding:34px 20px;
  font-family:var(--tw-font-b,'Segoe UI',Roboto,Helvetica,Arial,sans-serif);
}
.tw-fuss-innen{ max-width:var(--tw-maxw,1180px); margin:0 auto; }
.tw-fuss a{ color:#e8f0f5; }
.tw-fuss ul{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 0 14px; padding:0; }
.tw-fuss-klein{ font-size:.9rem; opacity:.75; }

/* ---------- Bausteine, die Frank im Editor einsetzt ----------
   Sie sollen aussehen wie der bisherige Fliesstext und die bisherigen
   Galerien -- sonst faellt auf, was von Hand gepflegt wurde und was nicht.

   WICHTIG: Diese Regeln duerfen NUR die Bausteine aus dem Editor treffen,
   nicht die eingebetteten Bloecke (Startseite). Deshalb ueberall der
   Kindselektor ">": Ein Absatz aus dem Editor ist ein direktes Kind von
   .entry-content, ein Absatz im Block steckt tief in dessen Geruest.
   Ohne das gewinnen diese Regeln nach Spezifitaet gegen das Block-CSS --
   die Hero-Schaltflaeche stand dann blau auf blau. */
#tw-seite .entry-content{
  max-width:var(--tw-lese,760px); margin:0 auto; padding:0 20px;
}
#tw-seite .entry-content > .alignwide{ max-width:var(--tw-maxw,1180px); }
#tw-seite .entry-content > .alignfull{ max-width:none; padding:0; }
#tw-seite .entry-content > p{
  font-size:1.08rem; line-height:1.75; margin:0 0 1.15em;
}
#tw-seite .entry-content > h2{
  font-family:var(--tw-font-h,Georgia,serif); font-size:1.85rem;
  line-height:1.25; margin:1.8em 0 .5em;
}
#tw-seite .entry-content > h3{
  font-family:var(--tw-font-h,Georgia,serif); font-size:1.35rem;
  margin:1.6em 0 .4em;
}
#tw-seite .entry-content > ul, #tw-seite .entry-content > ol{
  font-size:1.08rem; line-height:1.75; margin:0 0 1.15em; padding-left:1.4em;
}
#tw-seite .entry-content > ul li, #tw-seite .entry-content > ol li{
  list-style:inherit; margin:.3em 0;
}
#tw-seite .entry-content > p a,
#tw-seite .entry-content > ul a,
#tw-seite .entry-content > ol a{
  color:var(--tw-accent,#2f7396); text-decoration:underline;
}
#tw-seite .entry-content > figure img,
#tw-seite .wp-block-image img{
  max-width:100%; height:auto; border-radius:var(--tw-radius,14px);
}
#tw-seite .wp-block-image figcaption{
  font-size:.92rem; color:var(--tw-muted,#5a6c7d); text-align:center; margin-top:.5em;
}
/* Ein eingebetteter Block soll die Lesebreite sprengen duerfen */
#tw-seite .entry-content > section{
  max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  width:100vw;
}

/* Galerie-Baustein: dasselbe Raster wie in den fertigen Bloecken */
#tw-seite .wp-block-gallery.has-nested-images{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px; margin:1.6em 0;
}
#tw-seite .wp-block-gallery.has-nested-images figure.wp-block-image{
  margin:0; width:auto !important; flex:none !important;
}
#tw-seite .wp-block-gallery.has-nested-images figure.wp-block-image img{
  width:100%; height:230px; object-fit:cover; display:block;
  border-radius:var(--tw-radius,14px); box-shadow:var(--tw-shadow,0 2px 14px rgba(20,40,60,.09));
}

/* Hinweis im Editor: der Inhaltsbereich soll dort genauso breit wirken */
.editor-styles-wrapper{ font-family:var(--tw-font-b,'Segoe UI',sans-serif); }