/*
Theme Name: Steinschmuck & Mineralien
Theme URI: https://www.steinschmuckundmineralien.ch/
Author: Susanne Späti
Description: Massgeschneidertes Theme für Steinschmuck und Mineralien, Grenchen. Einseitige Website mit Galerie, Monatssteinen und Kontaktformular.
Version: 1.4
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: steinschmuck
*/

/* Steinschmuck und Mineralien, Grenchen
   Farben nach echten Steinen: Bergkristall, Amethyst, Rosenquarz, Malachit, Bernstein */

:root{
  --kristall:#EEE8F6;        /* heller Amethyst-Schimmer */
  --kristall-hell:#F8F4FC;
  --amethyst:#2C1748;        /* tiefes Amethyst-Dunkel */
  --amethyst-mittel:#6B3FA0; /* klares Amethyst-Violett */
  --amethyst-weich:#6A5A87;
  --flieder:#C9A8E8;
  --rosenquarz:#E2BEBE;
  --malachit:#3F6B5B;
  --bernstein:#B8813A;
  --linie:rgba(44,23,72,.18);
  --mass:clamp(1rem,4vw,2rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:1.5rem}
body{
  margin:0;
  background:var(--kristall);
  color:var(--amethyst);
  font-family:"Karla",system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .3vw,1.125rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Marcellus",Georgia,serif;font-weight:400;line-height:1.15;letter-spacing:.01em;margin:0}
p{margin:0 0 1em;max-width:62ch}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1120px,100% - var(--mass)*2);margin-inline:auto}
:focus-visible{outline:2px solid var(--bernstein);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopfzeile */
.kopf{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:baseline;padding:1.4rem 0 .6rem}
.kopf .marke{font-family:"Marcellus",serif;font-size:1.05rem;letter-spacing:.06em;text-decoration:none}
.kopf nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:1.1rem;font-size:.94rem}
.kopf nav a{text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.kopf nav a:hover,.kopf nav a:focus-visible{border-bottom-color:var(--bernstein)}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,5vw,4rem);align-items:center;padding:clamp(1.5rem,5vw,3.5rem) 0 clamp(2.5rem,7vw,5rem)}
.hero h1{font-size:clamp(2.4rem,7.5vw,4.4rem)}
.hero .unter{font-size:clamp(1.05rem,2.6vw,1.3rem);color:var(--amethyst-weich);max-width:34ch;margin-top:1.1rem}
.hero-daten{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.7rem}
.achat{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 44px rgba(44,23,72,.28))}
.achat-figur{margin:0}
.achat-figur figcaption{margin-top:1rem;font-size:.86rem;color:var(--amethyst-weich);font-style:italic}

/* Knöpfe */
.knopf{display:inline-block;text-decoration:none;padding:.72rem 1.35rem;border-radius:999px;font-size:.98rem;border:1px solid transparent;cursor:pointer;font-family:inherit}
.knopf-voll{background:var(--amethyst-mittel);color:#FFFFFF}
.knopf-voll:hover,.knopf-voll:focus-visible{background:var(--amethyst)}
.knopf-rand{border-color:var(--linie);background:transparent}
.knopf-rand:hover,.knopf-rand:focus-visible{border-color:var(--amethyst);background:var(--kristall-hell)}

/* Abschnitte */
section{padding:clamp(2.8rem,8vw,5rem) 0;border-top:1px solid var(--linie)}
.titel{font-size:clamp(1.7rem,4.4vw,2.5rem);margin-bottom:1.4rem}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem)}

.angebot{list-style:none;padding:0;margin:0;display:grid;gap:1.6rem}
.angebot li{padding-left:1.4rem;border-left:2px solid var(--amethyst-mittel)}
.angebot li:nth-child(2){border-left-color:var(--flieder)}
.angebot li:nth-child(3){border-left-color:var(--bernstein)}
.angebot li:nth-child(4){border-left-color:var(--amethyst-weich)}
.angebot h3{font-size:1.25rem;margin-bottom:.35rem}
.angebot p{margin:0;color:var(--amethyst-weich);font-size:.98rem}

/* Steinpalette */
.palette{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:clamp(1rem,3vw,1.8rem)}
.palette figcaption,.palette .name{font-family:"Marcellus",serif;font-size:1rem;margin-top:.6rem}
.palette .eigenschaft{font-size:.84rem;color:var(--amethyst-weich);line-height:1.4}
.palette svg{width:100%;height:auto}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:1.5rem}
.galerie figure{margin:0}
.galerie img{aspect-ratio:4/5;object-fit:cover;background:var(--kristall-hell);border:1px solid var(--linie)}
.galerie figcaption{font-size:.88rem;color:var(--amethyst-weich);margin-top:.5rem}

/* Monatssteine */
.monate{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1px;background:var(--linie);border:1px solid var(--linie)}
.monate li{background:var(--kristall);padding:1rem 1.1rem}
.monate .monat{font-family:"Marcellus",serif;font-size:1.05rem}
.monate .steine{font-size:.92rem;color:var(--amethyst-weich);margin-top:.2rem}

/* Formular */
.formular{display:grid;gap:1.1rem;max-width:34rem}
.feld{display:grid;gap:.35rem}
.feld label{font-size:.94rem}
.feld input,.feld textarea,.feld select{
  font:inherit;color:inherit;background:var(--kristall-hell);
  border:1px solid var(--linie);border-radius:4px;padding:.7rem .85rem;width:100%;
}
.feld textarea{min-height:9rem;resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--amethyst-weich);outline:none;box-shadow:0 0 0 3px rgba(107,63,160,.22)}
.pflicht{color:var(--bernstein)}
.zustimmung{display:flex;gap:.65rem;align-items:flex-start;font-size:.92rem;line-height:1.5}
.zustimmung input{width:1.1rem;height:1.1rem;margin-top:.25rem;flex:0 0 auto}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.meldung{padding:1rem 1.2rem;border-radius:4px;margin-bottom:1.5rem;max-width:34rem}
.meldung-ok{background:rgba(63,107,91,.12);border-left:3px solid var(--malachit)}
.meldung-fehler{background:rgba(184,129,58,.14);border-left:3px solid var(--bernstein)}
.feldfehler{font-size:.86rem;color:#8E3B2F}

/* Kontaktblock */
.kontakt{background:linear-gradient(160deg,#2C1748 0%,#4A2673 55%,#2C1748 100%);color:var(--kristall-hell);border-top:0}
.kontakt a{color:var(--flieder)}
.kontakt .titel{color:var(--kristall-hell)}
.kontakt .knopf-rand{border-color:rgba(237,235,240,.35)}
.kontakt .knopf-rand:hover{background:rgba(237,235,240,.1);border-color:var(--kristall-hell)}
.zeiten{width:100%;border-collapse:collapse;max-width:26rem;font-size:1rem}
.zeiten th{text-align:left;font-weight:400;font-family:"Marcellus",serif;padding:.45rem 1rem .45rem 0;vertical-align:top;white-space:nowrap}
.zeiten td{padding:.45rem 0;border-bottom:1px solid rgba(237,235,240,.14)}
.zeiten tr:last-child td{border-bottom:0}
.heute td,.heute th{color:var(--flieder)}
.adresse{font-size:1.15rem;line-height:1.9}
.adresse a{text-decoration:none;border-bottom:1px solid rgba(201,168,232,.55)}

.hinweis{font-size:.86rem;color:var(--amethyst-weich);max-width:70ch;border-top:1px solid var(--linie);padding-top:1.2rem;margin-top:2rem}
footer{padding:2rem 0 3rem;font-size:.85rem;color:var(--amethyst-weich);display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}

/* Rechtsseiten */
.rechtstext{padding:clamp(2rem,6vw,3.5rem) 0;border-top:1px solid var(--linie)}
.rechtstext h2{font-size:1.4rem;margin:2rem 0 .6rem}
.rechtstext h2:first-of-type{margin-top:0}
.rechtstext ul{max-width:62ch;padding-left:1.2rem}
.rechtstext li{margin-bottom:.4rem}

/* Eine einzige Bewegung: der Stein setzt sich beim Laden ins Bild */
@media (prefers-reduced-motion:no-preference){
  .achat{animation:einsetzen 1.4s cubic-bezier(.22,.7,.3,1) both}
  @keyframes einsetzen{from{opacity:0;transform:rotate(-9deg) scale(.94)}to{opacity:1;transform:none}}
}

/* Logo-Sperrsatz in der Kopfzeile */
.marke-logo{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.marke-logo svg{width:30px;height:auto;flex:0 0 auto}
.marke-text{display:flex;flex-direction:column;line-height:1.05}
.marke-name{font-family:"Marcellus",Georgia,serif;font-size:1.08rem;letter-spacing:.02em}
.marke-ort{font-family:"Marcellus",Georgia,serif;font-size:.72rem;letter-spacing:.34em;color:var(--amethyst-mittel)}
.custom-logo{max-height:56px;width:auto}

/* ==================================================================
   Darstellung auf Tablet und Handy
================================================================== */

/* Lange deutsche Wörter dürfen auf schmalen Schirmen trennen */
body{overflow-wrap:break-word;hyphens:auto}
h1,h2,h3{hyphens:manual}

/* Tablet quer: Spalten bleiben, Abstände werden knapper */
@media (max-width:1024px){
  .hero{gap:clamp(1.5rem,4vw,2.6rem)}
  .zwei{gap:clamp(1.4rem,4vw,2.6rem)}
  .galerie{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}

/* Tablet hoch und darunter: alles einspaltig */
@media (max-width:820px){
  .hero{grid-template-columns:1fr}
  .hero .bild{order:-1;max-width:320px;margin-inline:auto}
  .zwei{grid-template-columns:1fr}

  /* Navigation als eine Zeile, die sich seitlich schieben lässt */
  .kopf{gap:.4rem}
  .kopf nav{
    margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:.2rem;gap:1.25rem;
  }
  .kopf nav::-webkit-scrollbar{display:none}
  .kopf nav a{white-space:nowrap;padding-block:.45rem}

  .adresse{font-size:1.05rem;line-height:1.8}
}

/* Handy */
@media (max-width:640px){
  .galerie{grid-template-columns:1fr 1fr;gap:.7rem}
  .galerie figcaption{font-size:.8rem;margin-top:.4rem}
  .monate{grid-template-columns:1fr 1fr}
  .monate li{padding:.8rem .9rem}
  .monate .monat{font-size:1rem}
  .monate .steine{font-size:.86rem}

  .hero-daten{gap:.6rem}
  .hero-daten .knopf{flex:1 1 auto;text-align:center}

  .zeiten{font-size:.95rem}
  .zeiten th{padding-right:.7rem}

  .angebot{gap:1.3rem}
  .achat-figur figcaption{font-size:.82rem}
}

/* Kleine Handys */
@media (max-width:420px){
  .marke-logo svg{width:26px}
  .marke-name{font-size:.98rem}
  .marke-ort{font-size:.66rem;letter-spacing:.28em}
  .hero .bild{max-width:250px}
  .galerie{grid-template-columns:1fr}
  .monate{grid-template-columns:1fr}
  .hero-daten .knopf{flex:1 1 100%}
  .feld input,.feld textarea,.feld select{padding:.65rem .75rem}
}

/* Berührungsflächen gross genug, wo nur getippt wird */
@media (pointer:coarse){
  .knopf{padding:.85rem 1.4rem}
  .zustimmung input{width:1.25rem;height:1.25rem}
}