/*
Theme Name: Gugger
Theme URI: https://gugger.org
Author: Roman Gugger
Description: Persönliches Theme für gugger.org – fette Schrift, volle Farbflächen in Petrol, Pfirsich und Weinrot, Marker unter einem Wort.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: gugger
*/

@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans.woff2) format("woff2")}

:root{
  --petrol:#0f4c55; --on-petrol:#f5f0e7;
  --pfirsich:#f6c0a0; --on-pfirsich:#131617;
  --weinrot:#7c2235; --on-weinrot:#f5f0e7;
  --kreide:#f5f0e7; --tinte:#131617; --petrol-hell:#a7c4c4; --linie:#131617;
  --font-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius-card:10px; --radius-pill:999px;
  --pad:max(20px,4vw);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kreide);color:var(--tinte);font:400 18px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--pad);top:8px;background:var(--tinte);color:var(--kreide);padding:8px 12px;z-index:9}
:focus-visible{outline:3px solid var(--weinrot);outline-offset:3px}

/* Marker */
.mk{position:relative;z-index:0;white-space:nowrap}
.mk::before{content:"";position:absolute;z-index:-1;left:-.06em;right:-.1em;top:.12em;bottom:.02em;background:var(--mk,var(--pfirsich));border-radius:.08em .22em .12em .26em;transform:rotate(-1.4deg) skewX(-6deg);transform-origin:left center;animation:draw .9s var(--ease) .15s both}
@keyframes draw{from{transform:rotate(-1.4deg) skewX(-6deg) scaleX(0)}to{transform:rotate(-1.4deg) skewX(-6deg) scaleX(1)}}

/* Kopf */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px var(--pad)}
.wortmarke{font-weight:700;font-size:24px;letter-spacing:-.05em;text-decoration:none;line-height:1}
.site-nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.site-nav a{font-weight:700;font-size:16px;letter-spacing:-.02em;text-decoration:none;padding:4px 0;background:linear-gradient(var(--pfirsich),var(--pfirsich)) 0 100%/0 .45em no-repeat;transition:background-size .35s var(--ease)}
.site-nav a:hover,.site-nav .current-menu-item a{background-size:100% .45em}

/* Startseite */
.home{padding:clamp(24px,5vw,72px) var(--pad) var(--pad)}
.home h1{margin:0;font-weight:700;font-size:clamp(52px,12.5vw,200px);line-height:.88;letter-spacing:-.05em;max-width:12ch}
.home h1 .mk::before{top:.34em;bottom:.0em}
.home .lead{margin:clamp(20px,3vw,40px) 0 0;max-width:34ch;font-size:clamp(18px,2vw,24px);line-height:1.35;letter-spacing:-.02em}
.home .kacheln{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(32px,6vw,88px)}
.kachel{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(200px,28vw,380px);padding:clamp(20px,2.4vw,32px);border-radius:6px;text-decoration:none;transition:transform .4s var(--ease)}
.kachel:hover{transform:translateY(-6px) rotate(-.4deg)}
.kachel--petrol{background:var(--petrol);color:var(--on-petrol);--mk:var(--pfirsich)}
.kachel--pfirsich{background:var(--pfirsich);color:var(--on-pfirsich)}
.kachel--weinrot{background:var(--weinrot);color:var(--on-weinrot);--mk:var(--pfirsich)}
.home .kachel>.wp-block-group__inner-container{display:contents}
.kachel p{margin:0}
.kachel__name{font-weight:700;font-size:clamp(40px,7vw,112px);line-height:.9;letter-spacing:-.06em}
.kachel::after{content:"↗" / "";align-self:flex-end;font-weight:700;font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-.06em;transition:transform .4s var(--ease)}
.kachel:hover::after{transform:translate(6px,-6px)}
.kachel__name a{color:inherit;text-decoration:none}
.kachel__name a::after{content:"";position:absolute;inset:0}
.kachel__name a:focus-visible{outline:none}
.kachel:has(a:focus-visible){outline:3px solid var(--weinrot);outline-offset:3px}
.kachel__sub{font-size:15px;font-weight:700;letter-spacing:-.01em;opacity:.85}

/* Inhalt (Seiten, Beiträge) */
.inhalt{padding:clamp(24px,5vw,72px) var(--pad);max-width:calc(720px + 2*var(--pad))}
.inhalt h1{font-weight:700;font-size:clamp(40px,8vw,96px);line-height:.92;letter-spacing:-.06em;margin:0 0 .5em}
.inhalt h2,.inhalt h3{font-weight:700;letter-spacing:-.04em;line-height:1.05}
.inhalt h2{font-size:clamp(28px,4vw,40px);margin:1.6em 0 .4em}
.inhalt a{text-decoration-color:var(--pfirsich);text-decoration-thickness:.15em;text-underline-offset:.15em}
.inhalt a:hover{text-decoration-color:var(--weinrot)}
.inhalt blockquote{margin:1.5em 0;padding:1em 1.2em;background:var(--pfirsich);border-radius:6px;font-weight:700;letter-spacing:-.02em}
.beitraege{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.beitraege a{display:block;padding:18px 22px;border-radius:6px;background:var(--petrol);color:var(--on-petrol);text-decoration:none;font-weight:700;font-size:24px;letter-spacing:-.04em;transition:background .3s}
.beitraege a:hover{background:var(--weinrot)}

/* Fuss */
.site-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:28px var(--pad);font-size:15px;font-weight:700;letter-spacing:-.01em}
.rg{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--petrol);color:var(--on-petrol);font-weight:700;font-size:20px;letter-spacing:-.07em;text-decoration:none;padding-bottom:3px}
.site-foot a:not(.rg){text-decoration:none}
.site-foot a:not(.rg):hover{text-decoration:underline;text-decoration-color:var(--pfirsich);text-decoration-thickness:.2em}

@media (max-width:640px){
  .home .kacheln{grid-template-columns:1fr}
  .site-nav ul{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .mk::before{animation:none}
  .kachel,.kachel::after,.site-nav a{transition:none}
}