/*
Theme Name: Mannabergschule
Theme URI: https://www.mannabergschule.de
Author: Mannabergschule
Description: Verspieltes, barrierefreies WordPress-Theme fuer die Mannabergschule. Warmer Bastelpapier-Look mit handschriftlichen Ueberschriften, Vollbild-Intro mit dem Schulhaus-Bild und Anbindung an das Plugin "The Events Calendar" fuer Termine.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mannabergschule
*/

:root{
  --kraft-dunkel:#FFEFCE;
  --kraft:#FFF7E8;
  --papier:#FFFDF6;
  --rot:#FF6F59;
  --rot-dunkel:#8A2E1F;
  --tuerkis:#2BB3A3;
  --tuerkis-dunkel:#0B4A42;
  --gelb:#FFC93C;
  --gelb-dunkel:#6B4A00;
  --gruen:#8BC97C;
  --gruen-dunkel:#2F5C22;
  --pink:#FF7FA8;
  --pink-dunkel:#7A1F3D;
  --tinte:#4A3B2E;
  --washi:#FFD1C4;
  --washi-blau:#C7EFE9;
  --radius:10px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden; max-width:100%;}
body{
  margin:0;
  font-family:'Atkinson Hyperlegible', sans-serif;
  background:linear-gradient(160deg, #FFFBF2 0%, #FFF3DC 45%, #FFE9D6 100%);
  color:var(--tinte);
  font-size:18px;
  line-height:1.65;
}
img{max-width:100%; height:auto;}
h1,h2,h3,.hand{font-family:'Kalam', cursive; font-weight:700;}
a{color:var(--tuerkis-dunkel);}
a:focus-visible, button:focus-visible, input:focus-visible, .skip-link:focus{
  outline:3px solid var(--rot);
  outline-offset:3px;
}

/* Skip-Link fuer Tastatur- und Screenreader-Nutzung */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--papier);
  padding:12px 20px; z-index:200; border-radius:0 0 12px 0; font-weight:700; text-decoration:none;
}
.skip-link:focus{left:0;}

/* Barrierefreiheits-Werkzeugleiste */
.a11y-bar{
  background:var(--tinte); color:var(--papier); padding:8px 20px;
  display:flex; justify-content:flex-end; gap:10px; font-size:14px; position:relative; z-index:150;
}
.a11y-bar button{
  background:transparent; border:1px solid var(--papier); color:var(--papier);
  border-radius:8px; padding:4px 10px; cursor:pointer; font-size:14px; font-family:inherit;
}

/* ---------- INTRO / HERO (nur Startseite) ---------- */
.intro{
  min-height:100vh;
  background:linear-gradient(150deg, #FFF3E4 0%, #FFE7D2 40%, #FFDCD0 75%, #FFE3E8 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:60px 24px 100px; position:relative; overflow:hidden;
}
.pinned-photo{position:relative; display:inline-block; margin-bottom:28px;}
.pinned-photo img{
  max-width:340px; width:80vw; display:block; border-radius:2px;
  transform:rotate(-2deg); box-shadow:0 14px 26px rgba(0,0,0,0.28);
  border:8px solid var(--papier); background:var(--papier);
}
.tape{
  position:absolute; width:90px; height:32px; background:var(--washi);
  opacity:0.85; box-shadow:0 2px 4px rgba(0,0,0,0.15);
}
.tape::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,0.25) 0 4px, transparent 4px 8px);
}
.tape.t1{top:-16px; left:-20px; transform:rotate(-40deg);}
.tape.t2{top:-16px; right:-20px; transform:rotate(40deg); background:var(--washi-blau);}
.intro h1{font-size:44px; margin:0 0 6px; transform:rotate(-1.2deg); color:var(--tinte);}
.intro p.sub{max-width:460px; margin:0 auto 30px; font-size:18px;}
.torn-btn{
  display:inline-block; background:var(--rot); color:var(--papier); text-decoration:none;
  font-family:'Kalam',cursive; font-weight:700; font-size:19px; padding:14px 30px;
  clip-path:polygon(3% 15%,15% 0%,85% 8%,97% 0%,100% 85%,88% 100%,10% 92%,0% 100%);
  transform:rotate(1deg); border:none; cursor:pointer;
}
.torn-btn:hover{background:var(--rot-dunkel);}
.scroll-hint{margin-top:34px; font-size:14px; color:var(--tinte); opacity:0.8;}
@media (prefers-reduced-motion: no-preference){
  .pinned-photo{animation:fadein 1s ease-out;}
  .intro h1, .intro p.sub, .torn-btn{animation:fadein 1.2s ease-out;}
}
@keyframes fadein{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}

.torn-edge{position:relative; height:46px; margin-bottom:-1px; line-height:0;}
.torn-edge svg{display:block; width:100%; height:100%;}

/* ---------- NAV / HEADER (alle Seiten) ---------- */
header.site{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding:16px 32px; background:var(--papier);
}
.logo{font-size:24px; color:var(--rot-dunkel); text-decoration:none;}
nav.primary-nav ul{list-style:none; display:flex; flex-wrap:wrap; gap:4px; margin:0; padding:0;}
nav.primary-nav li{position:relative;}
nav.primary-nav a{
  text-decoration:none; color:var(--tinte); font-weight:700; padding:8px 12px;
  border-radius:6px; display:inline-block; font-size:15px;
}
nav.primary-nav a:hover, nav.primary-nav a:focus{background:var(--gelb); color:var(--gelb-dunkel);}

section, .content-wrap{padding:60px 32px; max-width:1100px; margin:0 auto;}
h2.section-title{font-size:32px; text-align:center; margin-bottom:8px; transform:rotate(-0.6deg);}
p.section-lead{text-align:center; max-width:560px; margin:0 auto 40px; color:var(--tinte);}

/* ---------- Fuenf-Saeulen-Karten (Startseite) ---------- */
.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:26px;}
.pillar{
  background:var(--papier); padding:26px 20px 22px; position:relative;
  box-shadow:0 6px 14px rgba(58,42,30,0.15); text-decoration:none; color:var(--tinte); display:block;
}
.pillar:nth-child(1){transform:rotate(-2deg);}
.pillar:nth-child(2){transform:rotate(1.5deg);}
.pillar:nth-child(3){transform:rotate(-1deg);}
.pillar:nth-child(4){transform:rotate(2deg);}
.pillar:nth-child(5){transform:rotate(-1.5deg);}
.pillar .tape{position:absolute; top:-14px; left:50%; margin-left:-45px; width:80px; height:26px;}
.pillar:nth-child(2) .tape{background:var(--washi-blau);}
.pillar:nth-child(4) .tape{background:#DCEFCB;}
.pillar:nth-child(5) .tape{background:#FFDCE8;}
.pillar h3{margin:8px 0 8px; font-size:22px;}
.pillar p{margin:0; font-size:15px;}
.pillar.c1{border-bottom:6px solid var(--tuerkis);}
.pillar.c2{border-bottom:6px solid var(--rot);}
.pillar.c3{border-bottom:6px solid var(--gelb);}
.pillar.c4{border-bottom:6px solid var(--gruen);}
.pillar.c5{border-bottom:6px solid var(--pink);}

/* ---------- Termine-Notiz ---------- */
.termine-note{
  background:var(--gelb); color:var(--gelb-dunkel); padding:34px 30px; max-width:640px; margin:0 auto;
  box-shadow:0 8px 18px rgba(58,42,30,0.2); transform:rotate(-1deg); position:relative;
}
.termine-note .pin{
  width:18px; height:18px; border-radius:50%; background:var(--rot); position:absolute;
  top:-9px; left:50%; margin-left:-9px; box-shadow:0 3px 4px rgba(0,0,0,0.3);
}
.termine-note h3{margin-top:6px;}
.termine-note .tribe-events, .termine-note .tribe-common{margin-top:20px; text-align:left; color:var(--tinte);}

/* ---------- Rundgang / Galerie ---------- */
.rundgang{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px; padding-top:10px;}
.polaroid{background:var(--papier); padding:12px 12px 34px; box-shadow:0 8px 16px rgba(58,42,30,0.2); position:relative;}
.polaroid:nth-child(odd){transform:rotate(-2.5deg);}
.polaroid:nth-child(even){transform:rotate(2deg);}
.polaroid .frame{background:var(--kraft-dunkel); aspect-ratio:1; display:flex; align-items:center; justify-content:center; color:var(--tinte); font-weight:700; text-align:center; padding:10px; overflow:hidden;}
.polaroid .frame img{width:100%; height:100%; object-fit:cover;}
.polaroid figcaption{text-align:center; font-family:'Kalam',cursive; margin-top:10px; font-size:16px;}

/* Bilder in einer normalen WordPress-Galerie auf der Rundgang-Seite ebenfalls im Polaroid-Look */
.rundgang-content .wp-block-gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px; list-style:none; padding:0;}
.rundgang-content figure.wp-block-image{
  background:var(--papier); padding:12px 12px 30px; box-shadow:0 8px 16px rgba(58,42,30,0.2); margin:0;
}
.rundgang-content figure.wp-block-image:nth-child(odd){transform:rotate(-2deg);}
.rundgang-content figure.wp-block-image:nth-child(even){transform:rotate(2deg);}
.rundgang-content figure.wp-block-image figcaption{font-family:'Kalam',cursive; text-align:center;}

/* ---------- Generische Inhaltsseiten ---------- */
.page-header-band{background:var(--papier); padding:40px 32px 10px; text-align:center;}
.page-header-band h1{font-size:36px; transform:rotate(-0.6deg);}
.entry-content{max-width:800px; margin:0 auto; padding:20px 32px 60px;}
.entry-content h2{margin-top:1.6em;}
.entry-content a{text-decoration-thickness:2px;}
.entry-content img{border-radius:6px;}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--tuerkis-dunkel); color:var(--papier); padding:44px 32px 36px; text-align:center;}
footer.site-footer a{color:var(--gelb);}
footer.site-footer h2{color:var(--gelb); margin-top:0;}
.footer-widgets{max-width:900px; margin:0 auto 20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; text-align:left;}

.note{
  background:var(--papier); border-left:6px solid var(--tuerkis); padding:16px 20px; margin:0 auto 10px; max-width:1100px;
}

/* Barrierefreiheits-Erklaerung im Footer besonders sichtbar */
.a11y-statement-link{font-weight:700;}

@media (max-width:600px){
  body{font-size:16px;}
  .intro{padding:44px 16px 70px;}
  .intro h1{font-size:30px; transform:rotate(-0.6deg);}
  .intro p.sub{font-size:16px;}
  .pinned-photo img{max-width:260px;}
  .tape{width:56px; height:22px;}
  .tape.t1{left:-8px;}
  .tape.t2{right:-8px;}
  section, .content-wrap{padding:40px 18px;}
  h2.section-title{font-size:26px;}
  .pillars, .rundgang{gap:20px 14px;}
  .pillar{transform:none !important; margin:6px 0;}
  .polaroid, .rundgang-content figure.wp-block-image{transform:none !important;}
  .torn-btn{font-size:17px; padding:12px 22px;}
  nav.primary-nav ul{justify-content:center;}
  header.site{justify-content:center; text-align:center;}
}

@media print{
  .a11y-bar, .torn-edge, .skip-link{display:none;}
}